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

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,8 +1,10 @@
 import * as React from "react";
+import { Alert } from "react-native";
 import { useRoute } from "@react-navigation/native";
 import {
   ButtonSolidProps,
-  FooterWithButtons
+  FooterWithButtons,
+  useIOExperimentalDesign
 } from "@pagopa/io-app-design-system";
 import I18n from "../../../i18n";
 import { fciEndRequest } from "../store/actions";
@@ -20,24 +22,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>
@@ -57,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,