chore(runway): cherry-pick fix(ramp): fixes order details bug cp-7.71.0 (#27801)

- fix(ramp): fixes order details bug cp-7.71.0 (#27755)

<!--
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**

Fixes an order details UI bug where the title for bank transfer details
was displaying for non bank-transfer orders.

[TRAM 3359](https://consensyssoftware.atlassian.net/browse/TRAM-3359)

<!--
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?
-->

## **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: fixes an order details UI bug

## **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. -->

### *
<img width="458" height="974" alt="Screenshot 2026-03-20 at 10 03 02 AM"

src="https://github.com/user-attachments/assets/4d94ca14-1e17-401d-945b-5f38acf28e4a"
/>
*Before**

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

### **After**

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

<img width="451" height="976" alt="Screenshot 2026-03-20 at 11 39 11 AM"

src="https://github.com/user-attachments/assets/19595c85-e138-4fdc-bb52-a57271593ff8"
/>


## **Pre-merge author checklist**

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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]
> **Low Risk**
> Low risk UI-only change that gates rendering of the bank details
section; main risk is unintentionally hiding bank details if upstream
field names/structure change.
> 
> **Overview**
> Fixes an order details UI bug where the bank-transfer section header
could render for non-bank-transfer orders.
> 
> `OrderContent` now returns `null` for `bankDetailFields` unless at
least one expected bank detail field (e.g., amount, routing/account,
IBAN/BIC) is present, and tests add coverage for
absent/empty/non-matching `paymentDetails` vs. bank-transfer/SEPA
scenarios.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
65f6cfc. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
[7e9748e](7e9748e)

Co-authored-by: George Weiler <georgejweiler@gmail.com>

Author: runway-github[bot]

app/components/UI/Ramp/Views/OrderDetails/OrderContent.test.tsx

@@ -7,6 +7,14 @@ import { type RampsOrder, RampsOrderStatus } from '@metamask/ramps-controller';
 import Clipboard from '@react-native-clipboard/clipboard';
 import InAppBrowser from 'react-native-inappbrowser-reborn';
 
+type RampsOrderWithPaymentDetails = RampsOrder & {
+  paymentDetails: {
+    fiatCurrency: string;
+    paymentMethod: string;
+    fields: { name: string; id: string; value: string }[];
+  }[];
+};
+
 const mockNavigate = jest.fn();
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
@@ -177,6 +185,84 @@ describe('OrderContent', () => {
     ).toBeOnTheScreen();
   });
 
+  it('does not render bank details section when paymentDetails is absent', () => {
+    renderOrder(mockOrder);
+
+    expect(screen.queryByText('To complete your order')).toBeNull();
+  });
+
+  it('does not render bank details section when paymentDetails has no matching fields', () => {
+    const orderWithPaymentDetails: RampsOrderWithPaymentDetails = {
+      ...mockOrder,
+      paymentDetails: [
+        {
+          fiatCurrency: 'USD',
+          paymentMethod: 'credit_debit_card',
+          fields: [],
+        },
+      ],
+    };
+
+    renderOrder(orderWithPaymentDetails);
+
+    expect(screen.queryByText('To complete your order')).toBeNull();
+  });
+
+  it('renders bank details section when paymentDetails has bank transfer fields', () => {
+    const orderWithPaymentDetails: RampsOrderWithPaymentDetails = {
+      ...mockOrder,
+      paymentDetails: [
+        {
+          fiatCurrency: 'USD',
+          paymentMethod: 'manual_bank_transfer',
+          fields: [
+            { name: 'Amount', id: 'amount', value: '$100.00' },
+            {
+              name: 'Routing Number',
+              id: 'routingNumber',
+              value: '021000021',
+            },
+            {
+              name: 'Account Number',
+              id: 'accountNumber',
+              value: '1234567890',
+            },
+          ],
+        },
+      ],
+    };
+
+    renderOrder(orderWithPaymentDetails);
+
+    expect(screen.getByText('To complete your order')).toBeOnTheScreen();
+    expect(screen.getByText(/Routing number/i)).toBeOnTheScreen();
+    expect(screen.getByText('021000021')).toBeOnTheScreen();
+  });
+
+  it('renders bank details section when paymentDetails only includes SEPA fields', () => {
+    const orderWithPaymentDetails: RampsOrderWithPaymentDetails = {
+      ...mockOrder,
+      paymentDetails: [
+        {
+          fiatCurrency: 'EUR',
+          paymentMethod: 'sepa_bank_transfer',
+          fields: [
+            { name: 'IBAN', id: 'iban', value: 'DE89370400440532013000' },
+            { name: 'BIC', id: 'bic', value: 'COBADEFFXXX' },
+          ],
+        },
+      ],
+    };
+
+    renderOrder(orderWithPaymentDetails);
+
+    expect(screen.getByText('To complete your order')).toBeOnTheScreen();
+    expect(screen.getByText(/^IBAN$/i)).toBeOnTheScreen();
+    expect(screen.getByText('DE89370400440532013000')).toBeOnTheScreen();
+    expect(screen.getByText(/^BIC$/i)).toBeOnTheScreen();
+    expect(screen.getByText('COBADEFFXXX')).toBeOnTheScreen();
+  });
+
   it('truncates long crypto amounts to 5 decimal places', () => {
     const longDecimalOrder: RampsOrder = {
       ...mockOrder,
@@ -195,7 +281,7 @@ describe('OrderContent', () => {
     };
     renderOrder(tinyAmountOrder);
     const tokenAmount = screen.getByTestId('ramps-order-details-token-amount');
-    // 0.00000614 has 5 leading zeros → "0.0₅614"
+    // 0.00000614 has 5 leading zeros -> "0.0₅614"
     expect(tokenAmount).toHaveTextContent('0.0₅614 ETH');
   });
 

app/components/UI/Ramp/Views/OrderDetails/OrderContent.tsx

@@ -280,6 +280,18 @@ const OrderContent: React.FC<OrderContentProps> = ({
     const iban = getFieldValue('IBAN');
     const bic = getFieldValue('BIC');
 
+    const hasAnyField =
+      amount ||
+      accountName ||
+      accountType ||
+      bankName ||
+      routingNumber ||
+      accountNumber ||
+      iban ||
+      bic;
+
+    if (!hasAnyField) return null;
+
     return {
       amount,
       accountName,