diff --git a/locales/en/index.yml b/locales/en/index.yml index bf40652b98b..5e6d54efe51 100644 --- a/locales/en/index.yml +++ b/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." diff --git a/locales/it/index.yml b/locales/it/index.yml index 699df0fe0e0..64825e4c8cf 100644 --- a/locales/it/index.yml +++ b/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." diff --git a/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx b/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx index 8c8dd9d0c0b..39138093c9d 100644 --- a/ts/features/fci/hooks/useFciAbortSignatureFlow.tsx +++ b/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,6 +23,18 @@ 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(), @@ -29,17 +42,17 @@ export const useFciAbortSignatureFlow = () => { 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: ( @@ -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,