feat(Firma con IO): [SFEQS-2071] Update Firma con IO with new DS components

ts/features/fci/components/DocumentViewer.tsx

@@ -1,25 +1,26 @@
 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 "../../../components/buttons/ButtonConfigurations";
 import { FciDownloadPreviewDirectoryPath } from "../saga/networking/handleDownloadDocument";
 import { useIODispatch, useIOSelector } from "../../../store/hooks";
 import { fciDownloadPreview } from "../store/actions";
 import {
   fciDownloadPathSelector,
   fciDownloadPreviewSelector
 } from "../store/reducers/fciDownloadPreview";
-import { LoadingErrorComponent } from "../../../components/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 ? (
     <FooterWithButtons
       type={"SingleButton"}
-      leftButton={confirmButtonProps(() => {
-        ReactNativeBlobUtil.ios.presentOptionsMenu(filePath);
-      }, I18n.t("messagePDFPreview.open"))}
+      primary={{ type: "Solid", buttonProps: confirmButtonProps }}
     />
   ) : (
     <FooterWithButtons
       type={"ThreeButtonsInLine"}
-      leftButton={{
-        bordered: true,
-        primary: false,
-        onPress: () => {
-          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 = () => (
-  <LoadingErrorComponent
-    isLoading={true}
-    loadingCaption={""}
-    onRetry={constNull}
-    testID={"FciRouterLoadingScreenTestID"}
-  />
-);
-
 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 <LoadingComponent />;
+    return <LoadingComponent testID={"FciRouterLoadingScreenTestID"} />;
   }
 
   if (pot.isError(fciDownloadSelector) || isError) {

ts/features/fci/components/DocumentWithSignature.tsx

@@ -1,26 +1,31 @@
 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 { IconButton, IOColors } from "@pagopa/io-app-design-system";
-import { IOStyles } from "../../../components/core/variables/IOStyles";
-import FooterWithButtons from "../../../components/ui/FooterWithButtons";
+import { StyleSheet, View } from "react-native";
+import {
+  ButtonSolidProps,
+  FooterWithButtons,
+  H5,
+  HSpacer,
+  IconButton,
+  IOColors,
+  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";
 import { fciSignatureDetailDocumentsSelector } from "../store/reducers/fciSignatureRequest";
-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
@@ -37,6 +42,14 @@ const styles = StyleSheet.create({
   pdf: {
     flex: 1,
     backgroundColor: IOColors.bluegrey
+  },
+  header: {
+    alignItems: "center",
+    flexDirection: "row"
+  },
+  headerTitle: {
+    flex: 1,
+    textAlign: "center"
   }
 });
 
@@ -49,11 +62,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 +153,6 @@ const DocumentWithSignature = (props: Props) => {
     );
   };
 
-  /**
-   * Renders the loading spinner.
-   * @returns a loading spinner overlay
-   */
-  const LoadingView = () => <LoadingSpinnerOverlay isLoading={true} />;
-
   /**
    * 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,39 +169,40 @@ const DocumentWithSignature = (props: Props) => {
     () =>
       pot.fold(
         parsedDocuments,
-        () => <LoadingView />,
-        () => <LoadingView />,
-        () => <LoadingView />,
+        () => <LoadingComponent />,
+        () => <LoadingComponent />,
+        () => <LoadingComponent />,
         () => <ErrorView />,
         some => (
           <RenderPdf document={some.drawnBase64} page={some.signaturePage} />
         ),
-        () => <LoadingView />,
-        () => <LoadingView />,
+        () => <LoadingComponent />,
+        () => <LoadingComponent />,
         () => <ErrorView />
       ),
     [ErrorView, RenderPdf, parsedDocuments]
   );
 
   return (
-    <Container>
-      <AppHeader>
-        <Left />
-        <Body style={{ alignItems: "center" }}>
-          <H5 weight={"SemiBold"} color={"bluegrey"}>
-            {I18n.t("messagePDFPreview.title")}
-          </H5>
-        </Body>
-        <Right>
-          <IconButton
-            icon="closeLarge"
-            onPress={props.onClose}
-            color="neutral"
-            testID="FciDocumentWithSignatureTopRightButtonTestID"
-            accessibilityLabel={I18n.t("global.buttons.close")}
-          />
-        </Right>
-      </AppHeader>
+    <SafeAreaView
+      style={[IOStyles.flex, IOStyles.bgWhite]}
+      testID={"FciDocumentsScreenTestID"}
+      edges={["bottom", "left", "right"]}
+    >
+      <View style={[IOStyles.horizontalContentPadding, styles.header]}>
+        <HSpacer />
+        <H5 weight={"SemiBold"} color={"bluegrey"} style={styles.headerTitle}>
+          {I18n.t("messagePDFPreview.title")}
+        </H5>
+        <IconButton
+          color="neutral"
+          accessibilityLabel={I18n.t("global.buttons.close")}
+          icon="closeLarge"
+          onPress={props.onClose}
+          testID="FciDocumentWithSignatureTopRightButtonTestID"
+        />
+      </View>
+      <VSpacer />
       <DocumentsNavigationBar
         indicatorPosition={"right"}
         titleLeft={I18n.t("features.fci.documentsBar.titleLeft", {
@@ -204,21 +213,19 @@ 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}
         testID={"FciDocumentsNavBarTestID"}
       />
-      <SafeAreaView style={IOStyles.flex} testID={"FciDocumentsScreenTestID"}>
-        <RenderMask />
-        <FooterWithButtons
-          type={"SingleButton"}
-          leftButton={continueButtonProps}
-        />
-      </SafeAreaView>
-    </Container>
+      <RenderMask />
+      <FooterWithButtons
+        type={"SingleButton"}
+        primary={{ type: "Solid", buttonProps: continueButtonProps }}
+      />
+    </SafeAreaView>
   );
 };
 export default DocumentWithSignature;