If device signals fail, fall back to KWS

src/ageAssurance/components/NoAccessScreen.tsx

@@ -384,8 +384,15 @@ function AccessSection() {
   const diff = lastInitiatedAt
     ? dateDiff(lastInitiatedAt, new Date(), 'down')
     : null
-  const {onPressVerify, openInitDialog, isVerifying, verifyCta} =
-    useAgeAssuranceVerificationFlow({initDialogControl: control})
+  const {
+    onPressVerify,
+    openInitDialog,
+    isVerifying,
+    verifyCta,
+    deviceSignalsFailed,
+  } = useAgeAssuranceVerificationFlow({initDialogControl: control})
+  const useDeviceSignals =
+    aa.flags.allowsDeviceVerification && !deviceSignalsFailed
 
   return (
     <>
@@ -426,7 +433,7 @@ function AccessSection() {
                 <ButtonText>{verifyCta}</ButtonText>
               </Button>
 
-              {aa.flags.allowsDeviceVerification ? (
+              {useDeviceSignals ? (
                 <Text
                   style={[a.text_sm, a.italic, t.atoms.text_contrast_medium]}>
                   <Trans>

src/ageAssurance/useVerificationFlow.ts

@@ -46,13 +46,16 @@ export function useAgeAssuranceVerificationFlow({
   const aa = useAgeAssurance()
   const hasInitiated = !!aa.state.lastInitiatedAt
   const allowsDeviceVerification = region && aa.flags.allowsDeviceVerification
-  const verifyCta = allowsDeviceVerification
-    ? l`Share age data`
-    : hasInitiated
-      ? l`Verify again`
-      : l`Verify now`
 
   const [isVerifying, setIsVerifying] = useState(false)
+  const [deviceSignalsFailed, setDeviceSignalsFailed] = useState(false)
+
+  const verifyCta =
+    allowsDeviceVerification && !deviceSignalsFailed
+      ? l`Share age data`
+      : hasInitiated
+        ? l`Verify again`
+        : l`Verify now`
 
   const openInitDialog = useCallback(() => {
     initDialogControl.open()
@@ -80,7 +83,7 @@ export function useAgeAssuranceVerificationFlow({
      * a response at all: `getDeviceSignals` handles its own errors and returns
      * undefined (e.g. on web or failure).
      */
-    if (allowsDeviceVerification) {
+    if (allowsDeviceVerification && !deviceSignalsFailed) {
       // Show a loading state while the OS age prompt is up.
       setIsVerifying(true)
       let signals: AgeRange.AgeRangeResponse | undefined
@@ -131,6 +134,7 @@ export function useAgeAssuranceVerificationFlow({
           l`Hmm, it seems your device was unable to share age information with us.`,
           {type: 'warning'},
         )
+        setDeviceSignalsFailed(true)
         return
       }
       logger.debug(
@@ -146,6 +150,8 @@ export function useAgeAssuranceVerificationFlow({
     allowsDeviceVerification,
     aa,
     l,
+    deviceSignalsFailed,
+    setDeviceSignalsFailed,
   ])
 
   return {
@@ -153,5 +159,6 @@ export function useAgeAssuranceVerificationFlow({
     openInitDialog,
     isVerifying,
     verifyCta,
+    deviceSignalsFailed,
   }
 }

src/components/ageAssurance/AgeAssuranceAccountCard.tsx

@@ -63,8 +63,15 @@ function Inner({style}: ViewStyleProp & {}) {
   const diff = lastInitiatedAt
     ? dateDiff(lastInitiatedAt, new Date(), 'down')
     : null
-  const {onPressVerify, openInitDialog, isVerifying, verifyCta} =
-    useAgeAssuranceVerificationFlow({initDialogControl: control})
+  const {
+    onPressVerify,
+    openInitDialog,
+    isVerifying,
+    verifyCta,
+    deviceSignalsFailed,
+  } = useAgeAssuranceVerificationFlow({initDialogControl: control})
+  const useDeviceSignals =
+    aa.flags.allowsDeviceVerification && !deviceSignalsFailed
 
   return (
     <>
@@ -156,7 +163,7 @@ function Inner({style}: ViewStyleProp & {}) {
                   <ButtonText>{verifyCta}</ButtonText>
                 </Button>
 
-                {aa.flags.allowsDeviceVerification ? (
+                {useDeviceSignals ? (
                   <Text
                     style={[a.text_sm, a.italic, t.atoms.text_contrast_medium]}>
                     <Trans>