Merge branch 'main' into money_acc_fixes

jpuri · web-flow · commit fa6c62a82335 · 2026-05-06T21:04:04.000+05:30
diff --git a/app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.test.tsx b/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);
+    });
+  });
 });
diff --git a/app/components/UI/Money/Views/MoneyHomeView/MoneyHomeView.tsx b/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 && (
diff --git a/app/components/UI/Money/components/MoneyMetaMaskCard/MoneyMetaMaskCard.test.tsx b/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()} />,
diff --git a/app/components/UI/Money/components/MoneyMetaMaskCard/MoneyMetaMaskCard.tsx b/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>
