feat(MUSD-739): hide Metal card outside US (#29735)

## **Description**

Money Home's `MoneyMetaMaskCard` upsell currently shows two card rows
(Virtual at 1% cashback, Metal at 3% cashback) to every user. The Metal
card is only available to US users today, so this PR adds geolocation
gating: the Metal card row is only rendered when the Ramps-detected
geolocation positively resolves to `US`. Loading, unknown (`undefined`),
and non-US country codes all fail closed and render only the Virtual
card row.

While here, both "Get now" buttons now route through the canonical
`metamask://card-onboarding` deeplink (via `handleDeeplink`) instead of
`navigation.navigate(Routes.CARD.ROOT)`, matching the upsell entry point
used elsewhere (e.g. `EarnRewardsPreview`).

`MoneyMetaMaskCard` accepts a new `showMetalCard` prop (default `false`)
so the view layer keeps ownership of the geolocation read; the component
stays a dumb presentational primitive. `MoneyHomeView` reads
`getDetectedGeolocation` from `app/reducers/fiatOrders` and normalizes
it the same way `useMusdConversionEligibility` does
(`?.toUpperCase().split('-')[0] === 'US'`).

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: MUSD-739

## **Manual testing steps**

```gherkin
Feature: Metal card geolocation gating in Money Home

  Scenario: US user sees both Virtual and Metal card rows
    Given the user's Ramps geolocation has resolved to "US"
    When the user opens the Money home screen and scrolls to the MetaMask Card section in upsell mode
    Then the Virtual card row (1% cashback) is visible
    And the Metal card row (3% cashback) is visible

  Scenario: Non-US user sees only the Virtual card row
    Given the user's Ramps geolocation has resolved to "GB" (or any non-US code)
    When the user opens the Money home screen and scrolls to the MetaMask Card section in upsell mode
    Then the Virtual card row (1% cashback) is visible
    And the Metal card row is not rendered

  Scenario: Unknown / loading geolocation hides the Metal card row
    Given the Ramps geolocation has not yet resolved (undefined)
    When the user opens the Money home screen and scrolls to the MetaMask Card section in upsell mode
    Then only the Virtual card row is visible

  Scenario: Get now button opens the card-onboarding deeplink
    Given the MetaMask Card upsell section is visible
    When the user taps the "Get now" button on either the Virtual or Metal card row
    Then the metamask://card-onboarding deeplink is dispatched
```

## **Screenshots/Recordings**

### **Before**

### **After**

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

#### Performance checks (if applicable)

- [ ] I've tested on Android
- [ ] I've tested with a power user scenario
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics

## **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 change that conditionally hides the Metal card upsell row
based on the existing ramps geolocation selector; main risk is incorrect
geolocation normalization causing the Metal row to appear/disappear
unexpectedly.
> 
> **Overview**
> Money Home now **hides the Metal card upsell row outside the US** by
reading `getDetectedGeolocation` and passing a new `showMetalCard` flag
into `MoneyMetaMaskCard` (US and US sub-regions like `US-CA` only;
`undefined`/non-US fail closed).
> 
> `MoneyMetaMaskCard` is updated to accept `showMetalCard` (default
`false`) and only render the Metal row when enabled, with tests expanded
to cover the new gating and MoneyHomeView integration.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
616aab6. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Kureev

app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.test.tsx

@@ -23,6 +23,7 @@ import { strings } from '../../../../../../locales/i18n';
 import MOCK_MONEY_TRANSACTIONS from '../../constants/mockActivityData';
 import useMoneyAccountBalance from '../../hooks/useMoneyAccountBalance';
 import { selectIsCardholder } from '../../../../../selectors/cardController';
+import { getDetectedGeolocation } from '../../../../../reducers/fiatOrders';
 import { moneyFormatFiat } from '../../utils/moneyFormatFiat';
 
 const mockGoBack = jest.fn();
@@ -85,7 +86,13 @@ jest.mock('../../../../../selectors/cardController', () => ({
   selectIsCardholder: jest.fn(),
 }));
 
+jest.mock('../../../../../reducers/fiatOrders', () => ({
+  ...jest.requireActual('../../../../../reducers/fiatOrders'),
+  getDetectedGeolocation: jest.fn(),
+}));
+
 const mockSelectIsCardholder = jest.mocked(selectIsCardholder);
+const mockGetDetectedGeolocation = jest.mocked(getDetectedGeolocation);
 
 const mockUseMoneyAccountTransactions = jest.mocked(
   useMoneyAccountTransactions,
@@ -134,6 +141,7 @@ describe('MoneyHomeView', () => {
     global.alert = jest.fn();
 
     mockSelectIsCardholder.mockReturnValue(false);
+    mockGetDetectedGeolocation.mockReturnValue('US');
 
     mockUseMoneyAccountBalance.mockReturnValue({
       totalFiatFormatted: '$3.00',
@@ -592,4 +600,82 @@ describe('MoneyHomeView', () => {
       });
     });
   });
+
+  describe('Metal card geolocation gating', () => {
+    it('renders the Metal card row when geolocation is US', () => {
+      mockGetDetectedGeolocation.mockReturnValue('US');
+
+      const { getByTestId } = renderWithProvider(<MoneyHomeView />);
+
+      expect(
+        getByTestId(MoneyMetaMaskCardTestIds.METAL_CARD_ROW),
+      ).toBeOnTheScreen();
+      expect(
+        getByTestId(MoneyMetaMaskCardTestIds.VIRTUAL_CARD_ROW),
+      ).toBeOnTheScreen();
+    });
+
+    it('renders the Metal card row when geolocation is a US sub-region (e.g. US-CA)', () => {
+      mockGetDetectedGeolocation.mockReturnValue('us-ca');
+
+      const { getByTestId } = renderWithProvider(<MoneyHomeView />);
+
+      expect(
+        getByTestId(MoneyMetaMaskCardTestIds.METAL_CARD_ROW),
+      ).toBeOnTheScreen();
+    });
+
+    it('hides the Metal card row when geolocation is GB', () => {
+      mockGetDetectedGeolocation.mockReturnValue('GB');
+
+      const { queryByTestId, getByTestId } = renderWithProvider(
+        <MoneyHomeView />,
+      );
+
+      expect(
+        queryByTestId(MoneyMetaMaskCardTestIds.METAL_CARD_ROW),
+      ).not.toBeOnTheScreen();
+      expect(
+        getByTestId(MoneyMetaMaskCardTestIds.VIRTUAL_CARD_ROW),
+      ).toBeOnTheScreen();
+    });
+
+    it('hides the Metal card row when geolocation is undefined (loading/unknown - fail closed)', () => {
+      mockGetDetectedGeolocation.mockReturnValue(undefined);
+
+      const { queryByTestId, getByTestId } = renderWithProvider(
+        <MoneyHomeView />,
+      );
+
+      expect(
+        queryByTestId(MoneyMetaMaskCardTestIds.METAL_CARD_ROW),
+      ).not.toBeOnTheScreen();
+      expect(
+        getByTestId(MoneyMetaMaskCardTestIds.VIRTUAL_CARD_ROW),
+      ).toBeOnTheScreen();
+    });
+  });
+
+  describe('Get now navigation', () => {
+    it('navigates to the card sign-up flow when the virtual card Get now button is pressed', () => {
+      mockGetDetectedGeolocation.mockReturnValue('GB');
+
+      const { getByText } = renderWithProvider(<MoneyHomeView />);
+
+      fireEvent.press(getByText(strings('money.metamask_card.get_now')));
+
+      expect(mockNavigate).toHaveBeenCalledWith(Routes.CARD.ROOT);
+    });
+
+    it('navigates to the card sign-up flow when the metal card Get now button is pressed', () => {
+      mockGetDetectedGeolocation.mockReturnValue('US');
+
+      const { getAllByText } = renderWithProvider(<MoneyHomeView />);
+      const buttons = getAllByText(strings('money.metamask_card.get_now'));
+
+      fireEvent.press(buttons[1]);
+
+      expect(mockNavigate).toHaveBeenCalledWith(Routes.CARD.ROOT);
+    });
+  });
 });

app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.tsx

@@ -36,6 +36,7 @@ import { TokenDetailsSource } from '../../../TokenDetails/constants/constants';
 import AppConstants from '../../../../../core/AppConstants';
 import NavigationService from '../../../../../core/NavigationService';
 import { selectIsCardholder } from '../../../../../selectors/cardController';
+import { getDetectedGeolocation } from '../../../../../reducers/fiatOrders';
 import Logger from '../../../../../util/Logger';
 import { AssetType } from '../../../../Views/confirmations/types/token';
 import { Hex } from '@metamask/utils';
@@ -73,6 +74,8 @@ const MoneyHomeView = () => {
   const { allTransactions, moneyAddress } = useMoneyAccountTransactions();
 
   const isCardholder = useSelector(selectIsCardholder);
+  const geolocation = useSelector(getDetectedGeolocation);
+  const isUS = geolocation?.toUpperCase().split('-')[0] === 'US';
 
   const homeState = getMoneyHomeState(allTransactions.length);
   const isMilestone = homeState === 'milestone' || homeState === 'filled';
@@ -296,6 +299,7 @@ const MoneyHomeView = () => {
           onHeaderPress={handleHeaderPress}
           onLinkPress={handleLinkCardPress}
           apy={apyPercent}
+          showMetalCard={isUS}
         />
         <Divider />
         {isMilestone && (

app/components/UI/Money/components/MoneyMetaMaskCard/MoneyMetaMaskCard.test.tsx

@@ -32,9 +32,9 @@ describe('MoneyMetaMaskCard', () => {
     ).toBeOnTheScreen();
   });
 
-  it('renders metal card row', () => {
+  it('renders metal card row when showMetalCard is true', () => {
     const { getByText, getByTestId } = render(
-      <MoneyMetaMaskCard onGetNowPress={jest.fn()} />,
+      <MoneyMetaMaskCard onGetNowPress={jest.fn()} showMetalCard />,
     );
 
     expect(
@@ -48,14 +48,36 @@ describe('MoneyMetaMaskCard', () => {
     ).toBeOnTheScreen();
   });
 
+  it('hides metal card row by default (showMetalCard not provided)', () => {
+    const { queryByTestId, queryByText } = render(
+      <MoneyMetaMaskCard onGetNowPress={jest.fn()} />,
+    );
+
+    expect(
+      queryByTestId(MoneyMetaMaskCardTestIds.METAL_CARD_ROW),
+    ).not.toBeOnTheScreen();
+    expect(
+      queryByText(strings('money.metamask_card.metal_card')),
+    ).not.toBeOnTheScreen();
+  });
+
+  it('hides metal card row when showMetalCard is false', () => {
+    const { queryByTestId } = render(
+      <MoneyMetaMaskCard onGetNowPress={jest.fn()} showMetalCard={false} />,
+    );
+
+    expect(
+      queryByTestId(MoneyMetaMaskCardTestIds.METAL_CARD_ROW),
+    ).not.toBeOnTheScreen();
+  });
+
   it('calls onGetNowPress when virtual card Get now is pressed', () => {
     const mockGetNow = jest.fn();
-    const { getAllByText } = render(
+    const { getByText } = render(
       <MoneyMetaMaskCard onGetNowPress={mockGetNow} />,
     );
-    const getNowButtons = getAllByText(strings('money.metamask_card.get_now'));
 
-    fireEvent.press(getNowButtons[0]);
+    fireEvent.press(getByText(strings('money.metamask_card.get_now')));
 
     expect(mockGetNow).toHaveBeenCalledTimes(1);
     expect(mockGetNow.mock.calls[0]).toEqual([]);
@@ -64,7 +86,7 @@ describe('MoneyMetaMaskCard', () => {
   it('calls onGetNowPress when metal card Get now is pressed', () => {
     const mockGetNow = jest.fn();
     const { getAllByText } = render(
-      <MoneyMetaMaskCard onGetNowPress={mockGetNow} />,
+      <MoneyMetaMaskCard onGetNowPress={mockGetNow} showMetalCard />,
     );
     const getNowButtons = getAllByText(strings('money.metamask_card.get_now'));
 
@@ -174,9 +196,9 @@ describe('MoneyMetaMaskCard', () => {
   });
 
   describe('upsell mode (default)', () => {
-    it('renders virtual and metal card rows', () => {
+    it('renders virtual and metal card rows when showMetalCard is true', () => {
       const { getByTestId } = render(
-        <MoneyMetaMaskCard onGetNowPress={jest.fn()} />,
+        <MoneyMetaMaskCard onGetNowPress={jest.fn()} showMetalCard />,
       );
 
       expect(
@@ -187,6 +209,19 @@ describe('MoneyMetaMaskCard', () => {
       ).toBeOnTheScreen();
     });
 
+    it('renders only the virtual card row when showMetalCard is false', () => {
+      const { getByTestId, queryByTestId } = render(
+        <MoneyMetaMaskCard onGetNowPress={jest.fn()} showMetalCard={false} />,
+      );
+
+      expect(
+        getByTestId(MoneyMetaMaskCardTestIds.VIRTUAL_CARD_ROW),
+      ).toBeOnTheScreen();
+      expect(
+        queryByTestId(MoneyMetaMaskCardTestIds.METAL_CARD_ROW),
+      ).not.toBeOnTheScreen();
+    });
+
     it('does not render link mode elements', () => {
       const { queryByTestId } = render(
         <MoneyMetaMaskCard onGetNowPress={jest.fn()} />,

app/components/UI/Money/components/MoneyMetaMaskCard/MoneyMetaMaskCard.tsx

@@ -34,6 +34,12 @@ interface MoneyMetaMaskCardProps {
   onLinkPress?: () => void;
   /** Current APY value displayed in the link mode bullet. */
   apy?: number;
+  /**
+   * Whether to render the Metal card row in upsell mode. Defaults to `false`
+   * because the Metal card is currently only available to US users; the parent
+   * is expected to pass the geolocation-derived flag.
+   */
+  showMetalCard?: boolean;
 }
 
 const CardRow = ({
@@ -166,6 +172,7 @@ const MoneyMetaMaskCard = ({
   onHeaderPress,
   onLinkPress,
   apy,
+  showMetalCard = false,
 }: MoneyMetaMaskCardProps) => {
   const handleLinkPress = useCallback(() => onLinkPress?.(), [onLinkPress]);
 
@@ -200,13 +207,15 @@ const MoneyMetaMaskCard = ({
             onPress={onGetNowPress}
             testID={MoneyMetaMaskCardTestIds.VIRTUAL_CARD_ROW}
           />
-          <CardRow
-            imageSource={mmCardMetal}
-            cardName={strings('money.metamask_card.metal_card')}
-            cashbackPercentage="3"
-            onPress={onGetNowPress}
-            testID={MoneyMetaMaskCardTestIds.METAL_CARD_ROW}
-          />
+          {showMetalCard && (
+            <CardRow
+              imageSource={mmCardMetal}
+              cardName={strings('money.metamask_card.metal_card')}
+              cashbackPercentage="3"
+              onPress={onGetNowPress}
+              testID={MoneyMetaMaskCardTestIds.METAL_CARD_ROW}
+            />
+          )}
         </>
       )}
     </Box>