feat(Firma con IO): [SFEQS-2083] Replace abort bottom sheet with alert (

#5425)

## Short description
This PR replaces the abort bottom sheet with an alert when using the new
design system, according to this
[FIGMA](https://www.figma.com/file/bX1jqH6ZHpAwoZgiF9M7Io/Firma-con-IO---2.0?type=design&node-id=68-9156&mode=design&t=QWsS3Pf7OJALcyHh-0).
The shown alert is just a placeholder for a nativa alert, thus we are
leaving Apple and OEMs for Android to decide how it looks on each
device, including the order of the buttons.
On iOS the `style: 'cancel'` prop places the button as second when text
requires wrapping. On Android, two buttons means `negative`, `positive`
and are placed accordingly ([ref](https://reactnative.dev/docs/alert)).

## List of changes proposed in this pull request
- Add locales;
- _Override_ the `present` function of the bottom sheet to show an alert
instead if the experimental design is enabled.
This allows us to use an alert without changing single components which
use the hook.
The bottom sheet will be removed once the experimental design is enabled
by default
([SFEQS-2090]([SFEQS-2090](https://pagopa.atlassian.net/browse/SFEQS-2090))).

## How to test
Open a signature flow either in production or with `io-dev-api-server`
by setting the flag `waitForSignatureCount: 1`. Then try to abort it.
Either a bottom sheet or an alert should be displayed if the
experimental design system is disabled or not.



[SFEQS-2090]:
https://pagopa.atlassian.net/browse/SFEQS-2090?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
[SFEQS-2090]:
https://pagopa.atlassian.net/browse/SFEQS-2090?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

---------

Co-authored-by: Mario Perrotta <[email protected]>

locales/en/index.yml

@@ -2801,6 +2801,10 @@ features:
       content: "Do you want to quit signing **{{dossierTitle}}**?"
       cancel: "Quit signing"
       confirm: "Keep signing"
+      alert:
+        title: "Do you want to stop the operation?"
+        confirm: "Yes, stop it"
+        cancel: "No, go back"
     checkService:
       title: "Turn on messages"
       content: "To receive the signed documents, you must turn on the setting that allows the service to send you messages. If you don't turn it on, you can complete the signature but you won't receive the signed documents."

locales/it/index.yml

@@ -2801,6 +2801,10 @@ features:
       content: "Vuoi annullare la firma di **{{dossierTitle}}**?"
       cancel: "Annulla la firma"
       confirm: "Continua a firmare"
+      alert: 
+        title: "Vuoi interrompere l'operazione?"
+        confirm: "Sì, interrompi"
+        cancel: "No, torna indietro"
     checkService:
       title: "Attiva i messaggi"
       content: "Per ricevere i documenti firmati devi attivare l’opzione che consente al servizio di inviarti messaggi. Se non la attivi, puoi completare la firma ma non riceverai i documenti firmati."

ts/features/fci/hooks/useFciAbortSignatureFlow.tsx

@@ -1,11 +1,12 @@
 import * as React from "react";
+import { Alert, View } from "react-native";
 import { useRoute } from "@react-navigation/native";
 import {
   BlockButtons,
   ButtonSolidProps,
-  IOVisualCostants
+  IOVisualCostants,
+  useIOExperimentalDesign
 } from "@pagopa/io-app-design-system";
-import { View } from "react-native";
 import I18n from "../../../i18n";
 import { fciEndRequest } from "../store/actions";
 import { useIODispatch, useIOSelector } from "../../../store/hooks";
@@ -22,24 +23,36 @@ export const useFciAbortSignatureFlow = () => {
   const dispatch = useIODispatch();
   const route = useRoute();
   const dossierTitle = useIOSelector(fciSignatureRequestDossierTitleSelector);
+  const fciEnvironment = useIOSelector(fciEnvironmentSelector);
+  const { isExperimental } = useIOExperimentalDesign();
+
+  /**
+   * Callback function to abort the signature flow.
+   */
+  const abortSignatureFlow = () => {
+    trackFciUserExit(route.name, fciEnvironment);
+    dispatch(fciEndRequest());
+    dismiss();
+  };
+
   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, fciEnvironment);
-      dispatch(fciEndRequest());
-      dismiss();
-    },
+    onPress: () => abortSignatureFlow(),
     color: "danger",
     label: I18n.t("features.fci.abort.cancel"),
     accessibilityLabel: I18n.t("features.fci.abort.cancel")
   };
-  const fciEnvironment = useIOSelector(fciEnvironmentSelector);
-  const { present, bottomSheet, dismiss } = useIOBottomSheetModal({
+
+  const {
+    present: presentBs,
+    bottomSheet,
+    dismiss
+  } = useIOBottomSheetModal({
     title: I18n.t("features.fci.abort.title"),
     component: (
       <LegacyMarkdown>
@@ -58,6 +71,29 @@ export const useFciAbortSignatureFlow = () => {
     )
   });
 
+  /**
+   * Show an alert to confirm the abort signature flow.
+   */
+  const showAlert = () => {
+    Alert.alert(I18n.t("features.fci.abort.alert.title"), undefined, [
+      {
+        text: I18n.t("features.fci.abort.alert.cancel"),
+        style: "cancel"
+      },
+      {
+        text: I18n.t("features.fci.abort.alert.confirm"),
+        onPress: () => abortSignatureFlow()
+      }
+    ]);
+  };
+
+  /**
+   * Overrides the present function of the bottom sheet to show an alert instead if the experimental design is enabled.
+   * This allows us to use an alert without changing single components which use the hook.
+   * TODO: remove when the experimental design will be enabled by default (SFEQS-2090)
+   */
+  const present = () => (isExperimental ? showAlert() : presentBs());
+
   return {
     dismiss,
     present,