feat: add Privacy tab to Settings V2 (#40743)

## **Description**

Adds the Privacy tab to Settings V2, migrating privacy-related settings
from the legacy `security-tab.component.js` to the new Settings V2
architecture. This work will be broken up into a few PRs to keep them
small. This one adds the following:

- Created a new Privacy tab (`privacy-tab.tsx`) with a registry-based
architecture
- Migrated 5 settings items from Settings V1:
  - **Basic Functionality** - Toggle for external services
  - **Batch Account Balance Requests** - Multi-account balance checker
  - **Skip Link Confirmation Screens** - Deep link interstitial setting
- **MetaMetrics** - Analytics participation toggle (with complex
enable/disable logic)
  - **Data Collection for Marketing** - Marketing consent toggle

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/40743?quickstart=1)

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/CEUX-911

## **Manual testing steps**

1. Uncomment the object under `Uncomment to view Settings V2 in
Hamburger Menu`
2. Navigate to Settings > Privacy
3. Verify all toggle items render correctly:
   - Basic Functionality toggle
   - Batch Account Balance Requests toggle
   - Skip Link Confirmation Screens toggle
   - MetaMetrics toggle
   - Data Collection for Marketing toggle
4. Test toggling each setting and verify state persists
5. Verify MetaMetrics toggle disables Data Collection when turned off
6. Verify Data Collection toggle is disabled when MetaMetrics is off

## **Screenshots/Recordings**

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

### **Before**

N/A - New feature

### **After**

<img width="433" height="766" alt="image"
src="https://github.com/user-attachments/assets/2312e6fe-acbe-4643-b8b5-d7ff25d3aff5"
/>


<img width="434" height="770" alt="image"
src="https://github.com/user-attachments/assets/67fd1b38-4b21-428e-9eab-505eddf4f9fa"
/>

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/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-extension/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]
> **Medium Risk**
> Touches privacy/analytics consent toggles and related MetaMetrics
tracking, so mistakes could change user opt-in/out behavior. Scope is
mostly UI wiring to existing actions/selectors with added tests,
reducing risk.
> 
> **Overview**
> Adds a new **Settings V2 Privacy** page (`/settings-v2/privacy`) and
menu entry, implemented as a registry-driven tab with toggles for
**Basic Functionality (external services)**, **Batch account balance
requests**, **Skip link confirmation screens**, **MetaMetrics
participation**, and **Data collection for marketing** (including
disable/consent-cascade behavior when MetaMetrics is turned off).
> 
> Updates i18n copy (new V2 descriptions, new skip-link strings, revised
marketing-data wording) and adds unit tests/console baselines plus a
snapshot update reflecting the new marketing description text.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
026d54b. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: ameliejyc

app/_locales/en/messages.json

@@ -2847,6 +2847,18 @@
     "ui/pages/settings-v2/preferences-and-display-tab/theme-sub-page.test.tsx": {
       "warn: ⚠️ React Router Future Flag": 2
     },
+    "ui/pages/settings-v2/privacy-tab/basic-functionality-item.test.tsx": {
+      "React: componentWill* lifecycle deprecations": 1,
+      "warn: ⚠️ React Router Future Flag": 2
+    },
+    "ui/pages/settings-v2/privacy-tab/data-collection-item.test.tsx": {
+      "React: componentWill* lifecycle deprecations": 1,
+      "warn: ⚠️ React Router Future Flag": 2
+    },
+    "ui/pages/settings-v2/privacy-tab/metametrics-item.test.tsx": {
+      "React: componentWill* lifecycle deprecations": 1,
+      "warn: ⚠️ React Router Future Flag": 2
+    },
     "ui/pages/settings-v2/settings-v2.test.tsx": {
       "React: componentWill* lifecycle deprecations": 1,
       "warn: ⚠️ React Router Future Flag": 2

app/_locales/en_GB/messages.json

@@ -21,6 +21,7 @@ export const THEME_ROUTE = '/settings-v2/preferences-and-display/theme';
 export const LANGUAGE_ROUTE = '/settings-v2/preferences-and-display/language';
 export const ACCOUNT_IDENTICON_ROUTE =
   '/settings-v2/preferences-and-display/account-identicon';
+export const PRIVACY_ROUTE = '/settings-v2/privacy';
 export const GENERAL_ROUTE = '/settings/general';
 export const ADVANCED_ROUTE = '/settings/advanced';
 export const DEVELOPER_OPTIONS_ROUTE = '/settings/developer-options';

test/jest/console-baseline-unit.json

@@ -0,0 +1,124 @@
+import { fireEvent, screen } from '@testing-library/react';
+import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import mockState from '../../../../test/data/mock-state.json';
+import { enLocale as messages } from '../../../../test/lib/i18n-helpers';
+import { renderWithProvider } from '../../../../test/lib/render-helpers-navigate';
+import { setBackgroundConnection } from '../../../store/background-connection';
+import { BasicFunctionalityToggleItem } from './basic-functionality-item';
+
+const mockToggleExternalServices = jest.fn();
+const mockOpenBasicFunctionalityModal = jest.fn();
+
+jest.mock('../../../store/actions', () => ({
+  ...jest.requireActual('../../../store/actions'),
+  toggleExternalServices: (val: boolean) => {
+    mockToggleExternalServices(val);
+    return { type: 'MOCK_ACTION' };
+  },
+}));
+
+jest.mock('../../../ducks/app/app', () => ({
+  ...jest.requireActual('../../../ducks/app/app'),
+  openBasicFunctionalityModal: () => {
+    mockOpenBasicFunctionalityModal();
+    return { type: 'MOCK_OPEN_MODAL' };
+  },
+}));
+
+const backgroundConnectionMock = new Proxy(
+  {},
+  { get: () => jest.fn().mockResolvedValue(undefined) },
+);
+
+describe('BasicFunctionalityToggleItem', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    setBackgroundConnection(backgroundConnectionMock as never);
+  });
+
+  it('renders title', () => {
+    const mockStore = configureMockStore([thunk])(mockState);
+    renderWithProvider(<BasicFunctionalityToggleItem />, mockStore);
+
+    expect(
+      screen.getByText(messages.basicConfigurationLabel.message),
+    ).toBeInTheDocument();
+  });
+
+  it('renders description with privacy link', () => {
+    const mockStore = configureMockStore([thunk])(mockState);
+    renderWithProvider(<BasicFunctionalityToggleItem />, mockStore);
+
+    const link = screen.getByRole('link', {
+      name: messages.privacyMsg.message,
+    });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute('href', 'https://consensys.io/privacy-policy');
+  });
+
+  it('renders toggle in enabled state when useExternalServices is true', () => {
+    const storeEnabled = configureMockStore([thunk])({
+      ...mockState,
+      metamask: {
+        ...mockState.metamask,
+        useExternalServices: true,
+      },
+    });
+    renderWithProvider(<BasicFunctionalityToggleItem />, storeEnabled);
+
+    expect(screen.getByTestId('basic-functionality-toggle')).toHaveAttribute(
+      'value',
+      'true',
+    );
+  });
+
+  it('renders toggle in disabled state when useExternalServices is false', () => {
+    const storeDisabled = configureMockStore([thunk])({
+      ...mockState,
+      metamask: {
+        ...mockState.metamask,
+        useExternalServices: false,
+      },
+    });
+    renderWithProvider(<BasicFunctionalityToggleItem />, storeDisabled);
+
+    expect(screen.getByTestId('basic-functionality-toggle')).toHaveAttribute(
+      'value',
+      'false',
+    );
+  });
+
+  it('opens modal when toggling off', () => {
+    const storeEnabled = configureMockStore([thunk])({
+      ...mockState,
+      metamask: {
+        ...mockState.metamask,
+        useExternalServices: true,
+      },
+    });
+    renderWithProvider(<BasicFunctionalityToggleItem />, storeEnabled);
+
+    fireEvent.click(screen.getByTestId('basic-functionality-toggle'));
+
+    expect(mockOpenBasicFunctionalityModal).toHaveBeenCalled();
+    expect(mockToggleExternalServices).not.toHaveBeenCalled();
+  });
+
+  it('calls toggleExternalServices when toggling on', () => {
+    const storeDisabled = configureMockStore([thunk])({
+      ...mockState,
+      metamask: {
+        ...mockState.metamask,
+        useExternalServices: false,
+      },
+    });
+    renderWithProvider(<BasicFunctionalityToggleItem />, storeDisabled);
+
+    fireEvent.click(screen.getByTestId('basic-functionality-toggle'));
+
+    expect(mockToggleExternalServices).toHaveBeenCalledWith(true);
+    expect(mockOpenBasicFunctionalityModal).not.toHaveBeenCalled();
+  });
+});

ui/helpers/constants/routes.ts

@@ -0,0 +1,64 @@
+import React, { useContext } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { TextButton } from '@metamask/design-system-react';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { getUseExternalServices } from '../../../selectors';
+import { toggleExternalServices } from '../../../store/actions';
+import { openBasicFunctionalityModal } from '../../../ducks/app/app';
+import { SettingsToggleItem } from '../../settings/settings-toggle-item';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventName,
+} from '../../../../shared/constants/metametrics';
+
+export const BasicFunctionalityToggleItem = () => {
+  const t = useI18nContext();
+  const dispatch = useDispatch();
+  const { trackEvent } = useContext(MetaMetricsContext);
+  const useExternalServices = useSelector(getUseExternalServices);
+
+  const handleToggle = (value: boolean) => {
+    if (value) {
+      dispatch(openBasicFunctionalityModal());
+    } else {
+      dispatch(toggleExternalServices(true));
+      trackEvent({
+        category: MetaMetricsEventCategory.Settings,
+        event: MetaMetricsEventName.SettingsUpdated,
+        properties: {
+          /* eslint-disable @typescript-eslint/naming-convention */
+          settings_group: 'security_privacy',
+          settings_type: 'basic_functionality',
+          old_value: false,
+          new_value: true,
+          was_notifications_on: false,
+          was_profile_syncing_on: false,
+          /* eslint-enable @typescript-eslint/naming-convention */
+        },
+      });
+    }
+  };
+
+  const description = t('basicConfigurationDescriptionV2', [
+    <TextButton asChild key="privacy-link">
+      <a
+        href="https://consensys.io/privacy-policy"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {t('privacyMsg')}
+      </a>
+    </TextButton>,
+  ]);
+
+  return (
+    <SettingsToggleItem
+      title={t('basicConfigurationLabel')}
+      description={description}
+      value={useExternalServices}
+      onToggle={handleToggle}
+      dataTestId="basic-functionality-toggle"
+    />
+  );
+};