feat: adds "data collection for marketing" toggles

app/scripts/controllers/metametrics.js

@@ -471,6 +471,12 @@ export default class MetaMetricsController {
     return metaMetricsId;
   }
 
+  async setDataCollectionForMarketing(dataCollectionForMarketing) {
+    const { metaMetricsId } = this.state;
+    this.store.updateState({ dataCollectionForMarketing });
+    return metaMetricsId;
+  }
+
   get state() {
     return this.store.getState();
   }

app/scripts/metamask-controller.js

@@ -2948,6 +2948,10 @@ export default class MetamaskController extends EventEmitter {
         metaMetricsController.setParticipateInMetaMetrics.bind(
           metaMetricsController,
         ),
+      setDataCollectionForMarketing:
+        metaMetricsController.setDataCollectionForMarketing.bind(
+          metaMetricsController,
+        ),
       setCurrentLocale: preferencesController.setCurrentLocale.bind(
         preferencesController,
       ),

shared/constants/metametrics.ts

@@ -505,6 +505,7 @@ export enum MetaMetricsEventName {
   AccountRenamed = 'Account Renamed',
   ActivityDetailsOpened = 'Activity Details Opened',
   ActivityDetailsClosed = 'Activity Details Closed',
+  AnalyticsPreferenceSelected = 'Analytics Preference Selected',
   AppInstalled = 'App Installed',
   AppUnlocked = 'App Unlocked',
   AppUnlockedFailed = 'App Unlocked Failed',

ui/components/ui/popover/index.scss

@@ -28,6 +28,10 @@
     &__title--center {
       flex: 1;
     }
+
+    &__title-wrap {
+      white-space: normal;
+    }
   }
 
   &-bg {

ui/components/ui/popover/popover.component.js

@@ -75,6 +75,7 @@ const Popover = ({
   showScrollDown,
   onScrollDownButtonClick,
   centerTitle,
+  wrapTitle,
   headerProps = defaultHeaderProps,
   contentProps = defaultContentProps,
   footerProps = defaultFooterProps,
@@ -106,6 +107,7 @@ const Popover = ({
         ) : null}
         <Text
           textAlign={centerTitle ? TextAlign.Center : TextAlign.Start}
+          className={wrapTitle ? 'popover-header__title-wrap' : null}
           ellipsis
           variant={TextVariant.headingSm}
           as="h2"
@@ -184,6 +186,10 @@ const Popover = ({
 };
 
 Popover.propTypes = {
+  /**
+   * Avoid wrapping title
+   */
+  wrapTitle: PropTypes.bool,
   /**
    * Show title of the popover
    */

ui/ducks/metamask/metamask.js

@@ -56,6 +56,7 @@ const initialState = {
   knownMethodData: {},
   use4ByteResolution: true,
   participateInMetaMetrics: null,
+  dataCollectionForMarketing: null,
   nextNonce: null,
   currencyRates: {
     ETH: {
@@ -162,6 +163,12 @@ export default function reduceMetamask(state = initialState, action) {
         participateInMetaMetrics: action.value,
       };
 
+    case actionConstants.SET_DATA_COLLECTION_FOR_MARKETING:
+      return {
+        ...metamaskState,
+        dataCollectionForMarketing: action.value,
+      };
+
     case actionConstants.CLOSE_WELCOME_SCREEN:
       return {
         ...metamaskState,

ui/pages/home/home.component.js

@@ -19,9 +19,10 @@ import SmartTransactionsOptInModal from '../../components/app/smart-transactions
 ///: END:ONLY_INCLUDE_IF
 import HomeNotification from '../../components/app/home-notification';
 import MultipleNotifications from '../../components/app/multiple-notifications';
+import Typography from '../../components/ui/typography/typography';
 import TransactionList from '../../components/app/transaction-list';
-import Popover from '../../components/ui/popover';
 import Button from '../../components/ui/button';
+import Popover from '../../components/ui/popover';
 import ConnectedSites from '../connected-sites';
 import ConnectedAccounts from '../connected-accounts';
 import { Tabs, Tab } from '../../components/ui/tabs';
@@ -40,6 +41,8 @@ import {
   JustifyContent,
   ///: END:ONLY_INCLUDE_IF
   Severity,
+  FlexDirection,
+  BlockSize,
 } from '../../helpers/constants/design-system';
 import { SECOND } from '../../../shared/constants/time';
 import {
@@ -162,9 +165,12 @@ export default class Home extends PureComponent {
     // eslint-disable-next-line react/no-unused-prop-types
     totalUnapprovedCount: PropTypes.number.isRequired,
     defaultHomeActiveTabName: PropTypes.string,
+    participateInMetaMetrics: PropTypes.bool.isRequired,
     onTabClick: PropTypes.func.isRequired,
     haveSwapsQuotes: PropTypes.bool.isRequired,
     showAwaitingSwapScreen: PropTypes.bool.isRequired,
+    setDataCollectionForMarketing: PropTypes.func.isRequired,
+    dataCollectionForMarketing: PropTypes.bool.isRequired,
     swapsFetchParams: PropTypes.object,
     location: PropTypes.object,
     shouldShowWeb3ShimUsageNotification: PropTypes.bool.isRequired,
@@ -756,6 +762,98 @@ export default class Home extends PureComponent {
     );
   }
 
+  renderOnboardingPopover = () => {
+    const { t } = this.context;
+    const { setDataCollectionForMarketing } = this.props;
+
+    return (
+      <Popover
+        wrapTitle
+        centerTitle
+        onClose={() => {
+          setDataCollectionForMarketing(false);
+          this.context.trackEvent({
+            category: MetaMetricsEventCategory.Home,
+            event: MetaMetricsEventName.AnalyticsPreferenceSelected,
+            properties: {
+              has_marketing_consent: false,
+              location: 'marketing_consent_modal',
+            },
+          });
+        }}
+        title={t('onboardedMetametricsTitle')}
+        footer={
+          <Box
+            gap={2}
+            display={Display.Flex}
+            width={BlockSize.Full}
+            flexDirection={FlexDirection.Row}
+          >
+            <Button
+              type="secondary"
+              onClick={() => {
+                setDataCollectionForMarketing(false);
+                this.context.trackEvent({
+                  category: MetaMetricsEventCategory.Home,
+                  event: MetaMetricsEventName.AnalyticsPreferenceSelected,
+                  properties: {
+                    has_marketing_consent: false,
+                    location: 'marketing_consent_modal',
+                  },
+                });
+              }}
+            >
+              {t('onboardedMetametricsDisagree')}
+            </Button>
+            <Button
+              type="primary"
+              onClick={() => {
+                setDataCollectionForMarketing(true);
+                this.context.trackEvent({
+                  category: MetaMetricsEventCategory.Home,
+                  event: MetaMetricsEventName.AnalyticsPreferenceSelected,
+                  properties: {
+                    has_marketing_consent: true,
+                    location: 'marketing_consent_modal',
+                  },
+                });
+              }}
+            >
+              {t('onboardedMetametricsAccept')}
+            </Button>
+          </Box>
+        }
+      >
+        <Box
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
+          gap={2}
+          margin={4}
+        >
+          <Typography>
+            {t('onboardedMetametricsParagraph1', [
+              <a
+                href="https://support.metamask.io/privacy-and-security/how-to-manage-your-metametrics-settings/"
+                target="_blank"
+                rel="noopener noreferrer"
+                key="retention-link"
+              >
+                {t('onboardedMetametricsLink')}
+              </a>,
+            ])}
+          </Typography>
+          <Typography>{t('onboardedMetametricsParagraph2')}</Typography>
+          <ul className="home__onboarding_list">
+            <li>{t('onboardedMetametricsKey1')}</li>
+            <li>{t('onboardedMetametricsKey2')}</li>
+            <li>{t('onboardedMetametricsKey3')}</li>
+          </ul>
+          <Typography>{t('onboardedMetametricsParagraph3')}</Typography>
+        </Box>
+      </Popover>
+    );
+  };
+
   renderPopover = () => {
     const { setConnectedStatusPopoverHasBeenShown } = this.props;
     const { t } = this.context;
@@ -820,8 +918,10 @@ export default class Home extends PureComponent {
       showWhatsNewPopup,
       hideWhatsNewPopup,
       completedOnboarding,
+      participateInMetaMetrics,
       onboardedInThisUISession,
       announcementsToShow,
+      dataCollectionForMarketing,
       firstTimeFlowType,
       newNetworkAddedConfigurationId,
       isSmartTransactionsOptInModalAvailable,
@@ -905,6 +1005,10 @@ export default class Home extends PureComponent {
           {isPopup && !connectedStatusPopoverHasBeenShown
             ? this.renderPopover()
             : null}
+          {dataCollectionForMarketing === null &&
+          participateInMetaMetrics === true
+            ? this.renderOnboardingPopover()
+            : null}
           {
             ///: END:ONLY_INCLUDE_IF
           }

ui/pages/home/home.container.js

@@ -68,6 +68,7 @@ import {
   setNewTokensImported,
   setActiveNetwork,
   setNewTokensImportedError,
+  setDataCollectionForMarketing,
 } from '../../store/actions';
 import {
   hideWhatsNewPopup,
@@ -98,6 +99,8 @@ const mapStateToProps = (state) => {
     connectedStatusPopoverHasBeenShown,
     defaultHomeActiveTabName,
     swapsState,
+    dataCollectionForMarketing,
+    participateInMetaMetrics,
     firstTimeFlowType,
     completedOnboarding,
   } = metamask;
@@ -156,9 +159,11 @@ const mapStateToProps = (state) => {
     shouldShowSeedPhraseReminder: getShouldShowSeedPhraseReminder(state),
     isPopup,
     isNotification,
+    dataCollectionForMarketing,
     selectedAddress,
     firstPermissionsRequestId,
     totalUnapprovedCount,
+    participateInMetaMetrics,
     hasApprovalFlows: getApprovalFlows(state)?.length > 0,
     connectedStatusPopoverHasBeenShown,
     defaultHomeActiveTabName,
@@ -209,6 +214,8 @@ const mapDispatchToProps = (dispatch) => {
   ///: END:ONLY_INCLUDE_IF
 
   return {
+    setDataCollectionForMarketing: (val) =>
+      dispatch(setDataCollectionForMarketing(val)),
     closeNotificationPopup: () => closeNotificationPopup(),
     setConnectedStatusPopoverHasBeenShown: () =>
       dispatch(setConnectedStatusPopoverHasBeenShown()),

ui/pages/home/index.scss

@@ -1,6 +1,14 @@
 @use "design-system";
 
 .home {
+  &__onboarding_list {
+    list-style: initial;
+    margin-left: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
   &__container {
     display: flex;
     min-height: 100%;