feat(ui): Add warning if trying to enable biometrics when it's off in phone settings

src/locales/en/en.json

@@ -1317,6 +1317,11 @@
             "security": {
               "title": "Security",
               "biometry": "Biometric authentication",
+              "biometricsalert": {
+                "message": "In order to use biometrics you need to enable this in your settings. Would you like to do this?",
+                "ok": "Go to settings",
+                "cancel": "Setup later"
+              },
               "changepin": {
                 "title": "Change passcode",
                 "createpasscode": "Create new passcode",

src/ui/pages/Menu/components/Settings/Settings.test.tsx

@@ -313,6 +313,22 @@ describe("Settings page", () => {
       fireEvent.click(getByTestId("settings-item-0"));
     });
 
+    await waitFor(() => {
+      expect(
+        getByText(
+          EN_TRANSLATIONS.tabs.menu.tab.settings.sections.security
+            .biometricsalert.message
+        )
+      );
+    });
+
+    fireEvent.click(
+      getByText(
+        EN_TRANSLATIONS.tabs.menu.tab.settings.sections.security.biometricsalert
+          .ok
+      )
+    );
+
     await waitFor(() => {
       expect(openSettingMock).toBeCalledTimes(1);
     });

src/ui/pages/Menu/components/Settings/Settings.tsx

@@ -1,57 +1,57 @@
+import { BiometryErrorType } from "@aparajita/capacitor-biometric-auth";
+import { Browser } from "@capacitor/browser";
 import { IonCard, IonList, IonToggle } from "@ionic/react";
 import {
-  lockClosedOutline,
+  AndroidSettings,
+  IOSSettings,
+  NativeSettings,
+} from "capacitor-native-settings";
+import {
+  checkboxOutline,
+  fingerPrintOutline,
   informationCircleOutline,
   keyOutline,
-  logoDiscord,
-  libraryOutline,
-  checkboxOutline,
   layersOutline,
-  fingerPrintOutline,
+  libraryOutline,
+  lockClosedOutline,
+  logoDiscord,
 } from "ionicons/icons";
-import "./Settings.scss";
+import { useRef, useState } from "react";
 import { useSelector } from "react-redux";
-import { useEffect, useRef, useState } from "react";
-import {
-  NativeSettings,
-  AndroidSettings,
-  IOSSettings,
-} from "capacitor-native-settings";
-import {
-  BiometryError,
-  BiometryErrorType,
-} from "@aparajita/capacitor-biometric-auth";
-import { Browser } from "@capacitor/browser";
-import { i18n } from "../../../../../i18n";
 import pJson from "../../../../../../package.json";
-import { OptionIndex, OptionProps, SettingsProps } from "./Settings.types";
+import { Agent } from "../../../../../core/agent/agent";
 import { MiscRecordId } from "../../../../../core/agent/agent.types";
 import { BasicRecord } from "../../../../../core/agent/records";
+import { i18n } from "../../../../../i18n";
 import { useAppDispatch } from "../../../../../store/hooks";
 import {
   getBiometricsCacheCache,
   setEnableBiometricsCache,
 } from "../../../../../store/reducers/biometricsCache";
-import { Agent } from "../../../../../core/agent/agent";
-import { useBiometricAuth } from "../../../../hooks/useBiometricsHook";
-import { ChangePin } from "./components/ChangePin";
-import { SettingsItem } from "./components/SettingsItem";
-import { SubMenuKey } from "../../Menu.types";
+import { Alert } from "../../../../components/Alert";
+import { Verification } from "../../../../components/Verification";
 import {
   DISCORD_LINK,
   DOCUMENTATION_LINK,
 } from "../../../../globals/constants";
-import { Verification } from "../../../../components/Verification";
+import { useBiometricAuth } from "../../../../hooks/useBiometricsHook";
 import { showError } from "../../../../utils/error";
+import { SubMenuKey } from "../../Menu.types";
+import { ChangePin } from "./components/ChangePin";
+import { SettingsItem } from "./components/SettingsItem";
+import "./Settings.scss";
+import { OptionIndex, OptionProps, SettingsProps } from "./Settings.types";
+import { usePrivacyScreen } from "../../../../hooks/privacyScreenHook";
 
 const Settings = ({ switchView }: SettingsProps) => {
   const dispatch = useAppDispatch();
   const biometricsCache = useSelector(getBiometricsCacheCache);
   const [option, setOption] = useState<number | null>(null);
   const { biometricInfo, handleBiometricAuth } = useBiometricAuth();
-  const inBiometricSetup = useRef(false);
   const [verifyIsOpen, setVerifyIsOpen] = useState(false);
   const [changePinIsOpen, setChangePinIsOpen] = useState(false);
+  const [openBiometricAlert, setOpenBiometricAlert] = useState(false);
+  const { enablePrivacy, disablePrivacy } = usePrivacyScreen(false);
 
   const securityItems: OptionProps[] = [
     {
@@ -125,8 +125,6 @@ const Settings = ({ switchView }: SettingsProps) => {
   };
 
   const handleBiometricUpdate = () => {
-    inBiometricSetup.current = false;
-
     if (biometricsCache.enabled) {
       handleToggleBiometricAuth();
       return;
@@ -136,13 +134,7 @@ const Settings = ({ switchView }: SettingsProps) => {
       !biometricInfo?.strongBiometryIsAvailable &&
       biometricInfo?.code === BiometryErrorType.biometryNotEnrolled
     ) {
-      NativeSettings.open({
-        optionAndroid: AndroidSettings.Security,
-        optionIOS: IOSSettings.TouchIdPasscode,
-      }).then((result) => {
-        inBiometricSetup.current = result.status;
-      });
-
+      setOpenBiometricAlert(true);
       return;
     }
 
@@ -151,18 +143,21 @@ const Settings = ({ switchView }: SettingsProps) => {
 
   const biometricAuth = async () => {
     try {
+      await disablePrivacy();
       const result = await handleBiometricAuth();
+      await enablePrivacy();
       if (result === true) handleToggleBiometricAuth();
     } catch (e) {
       showError("Unable to enable/disable biometric auth", e, dispatch);
     }
   };
 
-  useEffect(() => {
-    if (biometricInfo?.strongBiometryIsAvailable && inBiometricSetup.current) {
-      handleBiometricUpdate();
-    }
-  }, [biometricInfo]);
+  const openSetting = () => {
+    NativeSettings.open({
+      optionAndroid: AndroidSettings.Security,
+      optionIOS: IOSSettings.TouchIdPasscode,
+    });
+  };
 
   const handleChangePin = () => {
     setVerifyIsOpen(true);
@@ -220,6 +215,10 @@ const Settings = ({ switchView }: SettingsProps) => {
     setOption(null);
   };
 
+  const closeAlert = () => {
+    setOpenBiometricAlert(false);
+  };
+
   return (
     <>
       <div className="settings-section-title">
@@ -269,6 +268,23 @@ const Settings = ({ switchView }: SettingsProps) => {
         isOpen={changePinIsOpen}
         setIsOpen={setChangePinIsOpen}
       />
+      <Alert
+        isOpen={openBiometricAlert}
+        setIsOpen={setOpenBiometricAlert}
+        dataTestId="biometric-enable-alert"
+        headerText={i18n.t(
+          "tabs.menu.tab.settings.sections.security.biometricsalert.message"
+        )}
+        confirmButtonText={`${i18n.t(
+          "tabs.menu.tab.settings.sections.security.biometricsalert.ok"
+        )}`}
+        cancelButtonText={`${i18n.t(
+          "tabs.menu.tab.settings.sections.security.biometricsalert.cancel"
+        )}`}
+        actionConfirm={openSetting}
+        actionCancel={closeAlert}
+        actionDismiss={closeAlert}
+      />
     </>
   );
 };