chore(runway): cherry-pick fix(ramp): cp-7.60.0 fix phone already registered error detection in BasicInfo form (#23299)

## **Description**

Fixed error handling in BasicInfo component to correctly access error
codes from Axios error responses. The code was previously trying to
access `error.error.errorCode` but Axios errors have the structure
`error.response.data.error.errorCode`, which prevented error code 2020
(phone already registered) from being detected correctly.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: #23302

## **Manual testing steps**

```gherkin
Feature: BasicInfo form error handling

  Scenario: user submits form with already registered phone number
    Given I am on the BasicInfo screen with valid form data
    When I submit the form with a phone number that is already registered
    Then I should see an error message indicating the phone is already registered
    And I should see a "Log in with email" button
    And clicking the logout button should navigate to the email entry screen
```

## **Screenshots/Recordings**

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

### **Before**

<img width="333" height="720" alt="image"
src="https://github.com/user-attachments/assets/0a01a7be-e4bb-496c-8396-e77d5785b668"
/>


### **After**


https://github.com/user-attachments/assets/e8acba92-1032-4f49-a5bd-84a605bda71f

## **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]
> Fixes BasicInfo to read Axios error response for code 2020, format the
email-based message, and expose a logout-to-email flow; updates tests to
use AxiosError and cover these behaviors.
> 
> - **UI (Deposit BasicInfo)**:
> - Parse Axios errors via `response.data.error` to detect Transak
`errorCode` `2020` and set `isPhoneRegisteredError`.
> - Extract email from error message to show localized
`phone_already_registered` banner text.
> - Show "Log in with email" action on the error banner and navigate to
`Routes.DEPOSIT.ENTER_EMAIL`; gracefully handle logout failures.
>   - Minor: add `AxiosError` typing and default fallback message.
> - **Tests** (`BasicInfo.test.tsx`):
> - Replace custom errors with `AxiosError` shaped responses; add/import
Axios types.
> - Verify formatted message, presence/absence of logout button by error
type, navigation on logout, and error handling when logout fails.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
0961bb6. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: amitabh94

app/components/UI/Ramp/Deposit/Views/BasicInfo/BasicInfo.test.tsx

@@ -9,6 +9,7 @@ import { createSsnInfoModalNavigationDetails } from '../Modals/SsnInfoModal';
 import { BuyQuote } from '@consensys/native-ramps-sdk';
 import { endTrace } from '../../../../../../util/trace';
 import Logger from '../../../../../../util/Logger';
+import { AxiosError, type InternalAxiosRequestConfig } from 'axios';
 import {
   MOCK_REGIONS,
   MOCK_US_REGION,
@@ -392,14 +393,27 @@ describe('BasicInfo Component', () => {
     });
 
     it('displays logout button when error has errorCode 2020', async () => {
-      // Mock Transak API error structure: { error: { errorCode: 2020, message: "..." } }
-      const error2020 = Object.assign(new Error('API Error'), {
-        error: {
-          errorCode: 2020,
-          message:
-            'This phone number is already registered. It has been used by an account created with k****@pedalsup.com. Login with this email to continue.',
+      // Mock Transak API error structure: { response: { data: { error: { errorCode: 2020, message: "..." } } } }
+      const errorMessage =
+        'This phone number is already registered. It has been used by an account created with k****@pedalsup.com. Login with this email to continue.';
+      const error2020 = new AxiosError(
+        errorMessage,
+        'ERR_BAD_REQUEST',
+        undefined,
+        undefined,
+        {
+          data: {
+            error: {
+              errorCode: 2020,
+              message: errorMessage,
+            },
+          },
+          status: 400,
+          statusText: 'Bad Request',
+          headers: {},
+          config: {} as InternalAxiosRequestConfig,
         },
-      });
+      );
       mockPostKycForm.mockRejectedValueOnce(error2020);
 
       render(BasicInfo);
@@ -435,13 +449,26 @@ describe('BasicInfo Component', () => {
 
     it('displays formatted error message for errorCode 2020', async () => {
       // Mock Transak API error structure with email in message
-      const error2020 = Object.assign(new Error('API Error'), {
-        error: {
-          errorCode: 2020,
-          message:
-            'This phone number is already registered. It has been used by an account created with k****@pedalsup.com. Login with this email to continue.',
+      const errorMessage =
+        'This phone number is already registered. It has been used by an account created with k****@pedalsup.com. Login with this email to continue.';
+      const error2020 = new AxiosError(
+        errorMessage,
+        'ERR_BAD_REQUEST',
+        undefined,
+        undefined,
+        {
+          data: {
+            error: {
+              errorCode: 2020,
+              message: errorMessage,
+            },
+          },
+          status: 400,
+          statusText: 'Bad Request',
+          headers: {},
+          config: {} as InternalAxiosRequestConfig,
         },
-      });
+      );
       mockPostKycForm.mockRejectedValueOnce(error2020);
 
       render(BasicInfo);
@@ -505,13 +532,26 @@ describe('BasicInfo Component', () => {
     });
 
     it('calls logoutFromProvider and navigates to EnterEmail on logout click', async () => {
-      const error2020 = Object.assign(new Error('API Error'), {
-        error: {
-          errorCode: 2020,
-          message:
-            'This phone number is already registered. It has been used by an account created with test@gmail.com. Login with this email to continue.',
+      const errorMessage =
+        'This phone number is already registered. It has been used by an account created with test@gmail.com. Login with this email to continue.';
+      const error2020 = new AxiosError(
+        errorMessage,
+        'ERR_BAD_REQUEST',
+        undefined,
+        undefined,
+        {
+          data: {
+            error: {
+              errorCode: 2020,
+              message: errorMessage,
+            },
+          },
+          status: 400,
+          statusText: 'Bad Request',
+          headers: {},
+          config: {} as InternalAxiosRequestConfig,
         },
-      });
+      );
       mockPostKycForm.mockRejectedValueOnce(error2020);
 
       render(BasicInfo);
@@ -553,13 +593,26 @@ describe('BasicInfo Component', () => {
       const logoutError = new Error('Logout failed');
       mockLogoutFromProvider.mockRejectedValueOnce(logoutError);
 
-      const error2020 = Object.assign(new Error('API Error'), {
-        error: {
-          errorCode: 2020,
-          message:
-            'This phone number is already registered. It has been used by an account created with d***@example.com. Login with this email to continue.',
+      const errorMessage =
+        'This phone number is already registered. It has been used by an account created with d***@example.com. Login with this email to continue.';
+      const error2020 = new AxiosError(
+        errorMessage,
+        'ERR_BAD_REQUEST',
+        undefined,
+        undefined,
+        {
+          data: {
+            error: {
+              errorCode: 2020,
+              message: errorMessage,
+            },
+          },
+          status: 400,
+          statusText: 'Bad Request',
+          headers: {},
+          config: {} as InternalAxiosRequestConfig,
         },
-      });
+      );
       mockPostKycForm.mockRejectedValueOnce(error2020);
 
       render(BasicInfo);

app/components/UI/Ramp/Deposit/Views/BasicInfo/BasicInfo.tsx

@@ -49,6 +49,7 @@ import Logger from '../../../../../../util/Logger';
 import BannerAlert from '../../../../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert';
 import { BannerAlertSeverity } from '../../../../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.types';
 import { useRegions } from '../../hooks/useRegions';
+import type { AxiosError } from 'axios';
 
 export interface BasicInfoParams {
   quote: BuyQuote;
@@ -230,31 +231,34 @@ const BasicInfo = (): JSX.Element => {
         }),
       );
     } catch (submissionError) {
-      // Check for Transak error code 2020 (phone already registered)
-      // API returns: { error: { errorCode: 2020, message: "..." } }
-      const errorWithCode = submissionError as unknown as {
-        error?: { errorCode?: number; message?: string };
-      };
-      const isPhoneError = errorWithCode?.error?.errorCode === 2020;
+      const axiosError = submissionError as AxiosError;
+      const apiError = (
+        axiosError?.response?.data as {
+          error?: { errorCode?: number; message?: string };
+        }
+      )?.error;
 
+      const isPhoneError = apiError?.errorCode === 2020;
       setIsPhoneRegisteredError(isPhoneError);
 
-      // For error code 2020, extract email from message and format it
-      let errorMessage = '';
-      if (isPhoneError && errorWithCode?.error?.message) {
-        // Extract email from message like "...created with k****@pedalsup.com..."
-        const emailMatch = errorWithCode.error.message.match(
-          /[\w*]+@[\w*]+(?:\.[\w*]+)*/,
-        );
+      const errorMessageText =
+        submissionError instanceof Error && submissionError.message
+          ? submissionError.message
+          : strings('deposit.basic_info.unexpected_error');
+
+      let errorMessage = errorMessageText;
+      if (isPhoneError && errorMessageText) {
+        // Extract email from message for error code 2020 (phone already registered)
+        const emailMatch = errorMessageText.match(/[\w*]+@[\w*]+(?:\.[\w*]+)*/);
         const email = emailMatch ? emailMatch[0] : '';
-        errorMessage = email
-          ? strings('deposit.basic_info.phone_already_registered', { email })
-          : errorWithCode.error.message;
-      } else {
-        errorMessage =
-          submissionError instanceof Error && submissionError.message
-            ? submissionError.message
-            : strings('deposit.basic_info.unexpected_error');
+        if (email) {
+          errorMessage = strings(
+            'deposit.basic_info.phone_already_registered',
+            {
+              email,
+            },
+          );
+        }
       }
 
       setError(errorMessage);