fix(card): cp-7.60.0 fix OTP inputs frozen screens (#22894)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Fixed critical OTP input freezing issues affecting three Card
onboarding/authentication screens where users were unable to navigate,
proceed, or sometimes even focus the 6-digit OTP input field.

**Problem:**
Users experienced UI freezing on OTP verification screens, preventing
them from:

- Focusing the OTP input field
- Navigating back to previous screens
- Proceeding after entering the verification code

**Root Cause:**
The implementations were missing the `useBlurOnFulfill` hook from
`react-native-confirmation-code-field`, which is critical for proper
input lifecycle management. Without this hook:

- The input field remained focused after all digits were entered
- The keyboard wasn't properly dismissed
- Focus conflicts caused the UI to freeze
- Navigation became blocked

**Solution:**

- Added `useBlurOnFulfill` hook to properly manage OTP input focus and
blur events
- Updated ref handling to use the hook's return value instead of manual
useRef
- Fixed hook dependency arrays to prevent stale closure issues
- Fixed a cooldown timing bug in ConfirmPhoneNumber (was setting
cooldown before API success)
- Updated all test mocks to include the new hook

The implementation now matches the working pattern used in the
Ramp/Deposit OTP screen (OtpCode.tsx), which doesn't experience these
issues.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Fixed OTP input freezing issues on Card email and phone
verification screens

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Integrates useBlurOnFulfill for OTP fields, adds platform-specific
autocomplete, refactors focus/refs, and fixes resend cooldown timing;
updates tests and mocks accordingly.
> 
> - **Card OTP flows**
> - Use `useBlurOnFulfill` for `CodeField` in `CardAuthentication`,
`ConfirmEmail`, and `ConfirmPhoneNumber` to manage focus/blur and
prevent freezes.
> - Replace manual `useRef` with hook-provided refs; update focus
effects and dependency arrays.
> - Add platform-specific `autoComplete` (`android: 'sms-otp'`, default:
`'one-time-code'`) and type `TextInputProps`.
>   - Cast `CodeField` refs to `React.RefObject<TextInput>`.
> - **Resend/cooldown behavior**
> - In `ConfirmPhoneNumber`, set cooldown after successful resend;
maintain guard against rapid presses with `resendInProgressRef`.
> - In `CardAuthentication`/`ConfirmEmail`, ensure countdown timers and
resend handlers respect cooldown state.
> - **Tests**
> - Update `react-native-confirmation-code-field` mocks to include
`useBlurOnFulfill` in related test files.
> - Minor adjustments (e.g., variable rename for
`contactVerificationId`) to align with implementation.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
158a841. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Brunonascdev

app/components/UI/Card/Views/CardAuthentication/CardAuthentication.test.tsx

@@ -105,6 +105,86 @@ jest.mock('./CardAuthentication.styles', () => ({
   }),
 }));
 
+// Mock react-native-confirmation-code-field
+jest.mock('react-native-confirmation-code-field', () => {
+  const React = jest.requireActual('react');
+  const { TextInput, View, Text } = jest.requireActual('react-native');
+
+  const MockCodeField = React.forwardRef(
+    (
+      {
+        value,
+        onChangeText,
+        cellCount,
+        keyboardType,
+        textContentType,
+        autoComplete,
+        renderCell,
+        rootStyle,
+        ...props
+      }: {
+        value: string;
+        onChangeText?: (text: string) => void;
+        cellCount: number;
+        keyboardType?: string;
+        textContentType?: string;
+        autoComplete?: string;
+        renderCell?: (params: {
+          index: number;
+          symbol: string;
+          isFocused: boolean;
+        }) => React.ReactNode;
+        rootStyle?: unknown;
+        [key: string]: unknown;
+      },
+      ref: React.Ref<typeof TextInput>,
+    ) =>
+      React.createElement(
+        View,
+        { testID: 'code-field', style: rootStyle },
+        React.createElement(TextInput, {
+          ref,
+          testID: 'otp-code-field',
+          value,
+          onChangeText,
+          keyboardType,
+          textContentType,
+          autoComplete,
+          maxLength: cellCount,
+          ...props,
+        }),
+        Array.from({ length: cellCount }, (_, index) => {
+          const symbol = value[index] || '';
+          const isFocused = index === value.length;
+          return renderCell
+            ? renderCell({ index, symbol, isFocused })
+            : React.createElement(
+                View,
+                { key: index, testID: `code-cell-${index}` },
+                React.createElement(Text, null, symbol),
+              );
+        }),
+      ),
+  );
+
+  const MockCursor = () => React.createElement(Text, { testID: 'cursor' }, '|');
+
+  const mockUseBlurOnFulfill = jest.fn(() => {
+    const ref = React.useRef({
+      focus: jest.fn(),
+      blur: jest.fn(),
+    });
+    return ref;
+  });
+
+  return {
+    CodeField: MockCodeField,
+    Cursor: MockCursor,
+    useClearByFocusCell: jest.fn(() => [{}, jest.fn()]),
+    useBlurOnFulfill: mockUseBlurOnFulfill,
+  };
+});
+
 jest.mock('../../../../../../locales/i18n', () => ({
   strings: (key: string, params?: Record<string, string | number>) => {
     const mockStrings: { [key: string]: string } = {

app/components/UI/Card/Views/CardAuthentication/CardAuthentication.tsx

@@ -1,11 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Image,
   KeyboardAvoidingView,
@@ -15,6 +9,7 @@ import {
   View,
   TextInput,
   StyleSheet,
+  TextInputProps,
 } from 'react-native';
 import { Box, Text, TextVariant } from '@metamask/design-system-react-native';
 
@@ -46,6 +41,7 @@ import Logger from '../../../../../util/Logger';
 import {
   CodeField,
   Cursor,
+  useBlurOnFulfill,
   useClearByFocusCell,
 } from 'react-native-confirmation-code-field';
 import { useStyles } from '../../../../../component-library/hooks';
@@ -56,6 +52,10 @@ import { setOnboardingId } from '../../../../../core/redux/slices/card';
 import { CardActions, CardScreens } from '../../util/metrics';
 
 const CELL_COUNT = 6;
+const autoComplete = Platform.select<TextInputProps['autoComplete']>({
+  android: 'sms-otp',
+  default: 'one-time-code',
+});
 
 // Styles for the OTP CodeField
 const createOtpStyles = (params: { theme: Theme }) => {
@@ -102,7 +102,6 @@ const CardAuthentication = () => {
     string | null
   >(null);
   const [resendCountdown, setResendCountdown] = useState(60);
-  const otpInputRef = useRef<TextInput>(null);
   const dispatch = useDispatch();
   const theme = useTheme();
   const {
@@ -174,12 +173,18 @@ const CardAuthentication = () => {
     }
   }, [step, resendCountdown]);
 
+  const otpInputRef =
+    useBlurOnFulfill({
+      value: confirmCode,
+      cellCount: CELL_COUNT,
+    }) || null;
+
   // Focus OTP input when entering OTP step
   useEffect(() => {
     if (step === 'otp') {
       otpInputRef.current?.focus();
     }
-  }, [step]);
+  }, [step, otpInputRef]);
 
   useEffect(() => {
     const screenName =
@@ -360,15 +365,15 @@ const CardAuthentication = () => {
                       )}
                     </Label>
                     <CodeField
-                      ref={otpInputRef}
+                      ref={otpInputRef as React.RefObject<TextInput>}
                       {...props}
                       value={confirmCode}
                       onChangeText={handleOtpValueChange}
                       cellCount={CELL_COUNT}
                       rootStyle={otpStyles.codeFieldRoot}
                       keyboardType="number-pad"
                       textContentType="oneTimeCode"
-                      autoComplete="one-time-code"
+                      autoComplete={autoComplete}
                       renderCell={({ index, symbol, isFocused }) => (
                         <View
                           onLayout={getCellOnLayoutHandler(index)}

app/components/UI/Card/components/Onboarding/ConfirmEmail.test.tsx

@@ -241,10 +241,19 @@ jest.mock('react-native-confirmation-code-field', () => {
     jest.fn(),
   ];
 
+  const mockUseBlurOnFulfill = jest.fn(() => {
+    const ref = React.useRef({
+      focus: jest.fn(),
+      blur: jest.fn(),
+    });
+    return ref;
+  });
+
   return {
     CodeField: MockCodeField,
     Cursor: MockCursor,
     useClearByFocusCell: mockUseClearByFocusCell,
+    useBlurOnFulfill: mockUseBlurOnFulfill,
   };
 });
 

app/components/UI/Card/components/Onboarding/ConfirmEmail.tsx

@@ -1,10 +1,4 @@
-import React, {
-  useCallback,
-  useState,
-  useEffect,
-  useContext,
-  useRef,
-} from 'react';
+import React, { useCallback, useState, useEffect, useContext } from 'react';
 import { useNavigation } from '@react-navigation/native';
 import { Box, Text, TextVariant } from '@metamask/design-system-react-native';
 import Button, {
@@ -38,14 +32,19 @@ import { IconName } from '../../../../../component-library/components/Icons/Icon
 import { useTheme } from '../../../../../util/theme';
 import { useStyles } from '../../../../hooks/useStyles';
 import { createOTPStyles } from './ConfirmPhoneNumber';
-import { TextInput, View } from 'react-native';
+import { Platform, TextInput, TextInputProps, View } from 'react-native';
 import {
   CodeField,
   Cursor,
+  useBlurOnFulfill,
   useClearByFocusCell,
 } from 'react-native-confirmation-code-field';
 
 const CELL_COUNT = 6;
+const autoComplete = Platform.select<TextInputProps['autoComplete']>({
+  android: 'sms-otp',
+  default: 'one-time-code',
+});
 
 const ConfirmEmail = () => {
   const navigation = useNavigation();
@@ -56,7 +55,6 @@ const ConfirmEmail = () => {
   const contactVerificationId = useSelector(selectContactVerificationId);
   const { trackEvent, createEventBuilder } = useMetrics();
   const { toastRef } = useContext(ToastContext);
-  const inputRef = useRef<TextInput>(null);
   const { styles } = useStyles(createOTPStyles, {});
   const [latestValueSubmitted, setLatestValueSubmitted] = useState<
     string | null
@@ -114,8 +112,9 @@ const ConfirmEmail = () => {
         .build(),
     );
     try {
-      const { contactVerificationId } = await sendEmailVerification(email);
-      dispatch(setContactVerificationId(contactVerificationId));
+      const { contactVerificationId: newContactVerificationId } =
+        await sendEmailVerification(email);
+      dispatch(setContactVerificationId(newContactVerificationId));
       setResendCooldown(60); // 1 minute cooldown
     } catch {
       // Allow error message to display
@@ -214,6 +213,17 @@ const ConfirmEmail = () => {
     }
   }, [resendCooldown]);
 
+  const inputRef =
+    useBlurOnFulfill({
+      value: confirmCode,
+      cellCount: CELL_COUNT,
+    }) || null;
+
+  // Focus management
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [inputRef]);
+
   // Auto-submit when all digits are entered
   useEffect(() => {
     if (
@@ -225,11 +235,6 @@ const ConfirmEmail = () => {
     }
   }, [confirmCode, handleContinue, latestValueSubmitted]);
 
-  // Focus management
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
-
   const [props, getCellOnLayoutHandler] = useClearByFocusCell({
     value: confirmCode,
     setValue: handleConfirmCodeChange,
@@ -251,15 +256,15 @@ const ConfirmEmail = () => {
           {strings('card.card_onboarding.confirm_email.confirm_code_label')}
         </Label>
         <CodeField
-          ref={inputRef}
+          ref={inputRef as React.RefObject<TextInput>}
           {...props}
           value={confirmCode}
           onChangeText={handleConfirmCodeChange}
           cellCount={CELL_COUNT}
           rootStyle={styles.codeFieldRoot}
           keyboardType="number-pad"
           textContentType="oneTimeCode"
-          autoComplete="one-time-code"
+          autoComplete={autoComplete}
           renderCell={({ index, symbol, isFocused }) => (
             <View
               onLayout={getCellOnLayoutHandler(index)}

app/components/UI/Card/components/Onboarding/ConfirmPhoneNumber.test.tsx

@@ -229,10 +229,19 @@ jest.mock('react-native-confirmation-code-field', () => {
 
   const MockCursor = () => React.createElement(Text, { testID: 'cursor' }, '|');
 
+  const mockUseBlurOnFulfill = jest.fn(() => {
+    const ref = React.useRef({
+      focus: jest.fn(),
+      blur: jest.fn(),
+    });
+    return ref;
+  });
+
   return {
     CodeField: MockCodeField,
     Cursor: MockCursor,
     useClearByFocusCell: jest.fn(() => [{}, jest.fn()]),
+    useBlurOnFulfill: mockUseBlurOnFulfill,
   };
 });