chore: cherry-pick #9687 (#9987)

This PR cherry-picks #9687 Co-authored-by: Jony Bursztyn <jonathan@bursztyn.io> Co-authored-by: EtherWizard33 <eric.lamontagne@consensys.net> Co-authored-by: sethkfman <10342624+sethkfman@users.noreply.github.com> Co-authored-by: Curtis David <Curtis.David7@gmail.com> Co-authored-by: tommasini <46944231+tommasini@users.noreply.github.com> Co-authored-by: salimtb <salim.toubal@outlook.com>
MetaMask · Jun 13, 2024 · 81d9dd8 · 81d9dd8
1 parent 5443c9e
commit 81d9dd8
Show file tree

Hide file tree

Showing 25 changed files with 1,083 additions and 8 deletions.
diff --git a/app/actions/security/index.ts b/app/actions/security/index.ts
@@ -6,6 +6,7 @@ export enum ActionType {
   SET_AUTOMATIC_SECURITY_CHECKS = 'SET_AUTOMATIC_SECURITY_CHECKS',
   USER_SELECTED_AUTOMATIC_SECURITY_CHECKS_OPTION = 'USER_SELECTED_AUTOMATIC_SECURITY_CHECKS_OPTION',
   SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN = 'SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN',
+  SET_DATA_COLLECTION_FOR_MARKETING = 'SET_DATA_COLLECTION_FOR_MARKETING',
 }
 
 export interface AllowLoginWithRememberMeUpdated
@@ -28,11 +29,17 @@ export interface SetAutomaticSecurityChecksModalOpen
   open: boolean;
 }
 
+export interface SetDataCollectionForMarketing
+  extends ReduxAction<ActionType.SET_DATA_COLLECTION_FOR_MARKETING> {
+  enabled: boolean;
+}
+
 export type Action =
   | AllowLoginWithRememberMeUpdated
   | AutomaticSecurityChecks
   | UserSelectedAutomaticSecurityChecksOptions
-  | SetAutomaticSecurityChecksModalOpen;
+  | SetAutomaticSecurityChecksModalOpen
+  | SetDataCollectionForMarketing;
 
 export const setAllowLoginWithRememberMe = (
   enabled: boolean,
@@ -60,3 +67,8 @@ export const setAutomaticSecurityChecksModalOpen = (
   type: ActionType.SET_AUTOMATIC_SECURITY_CHECKS_MODAL_OPEN,
   open,
 });
+
+export const setDataCollectionForMarketing = (enabled: boolean) => ({
+  type: ActionType.SET_DATA_COLLECTION_FOR_MARKETING,
+  enabled,
+});
diff --git a/app/actions/security/state.ts b/app/actions/security/state.ts
@@ -3,4 +3,6 @@ export interface SecuritySettingsState {
   automaticSecurityChecksEnabled: boolean;
   hasUserSelectedAutomaticSecurityCheckOption: boolean;
   isAutomaticSecurityChecksModalOpen: boolean;
+  // 'null' represents the user not having set his preference over dataCollectionForMarketing yet
+  dataCollectionForMarketing: boolean | null;
 }
diff --git a/app/components/Nav/App/index.js b/app/components/Nav/App/index.js
@@ -10,6 +10,7 @@ import { Animated, Linking } from 'react-native';
 import { createStackNavigator } from '@react-navigation/stack';
 import Login from '../../Views/Login';
 import QRScanner from '../../Views/QRScanner';
+import DataCollectionModal from '../../Views/DataCollectionModal';
 import Onboarding from '../../Views/Onboarding';
 import OnboardingCarousel from '../../Views/OnboardingCarousel';
 import ChoosePassword from '../../Views/ChoosePassword';
@@ -100,6 +101,7 @@ import ShowDisplayNftMediaSheet from '../../Views/ShowDisplayMediaNFTSheet/ShowD
 import AmbiguousAddressSheet from '../../../../app/components/Views/Settings/Contacts/AmbiguousAddressSheet/AmbiguousAddressSheet';
 import SDKDisconnectModal from '../../../../app/components/Views/SDKDisconnectModal/SDKDisconnectModal';
 import SDKSessionModal from '../../../../app/components/Views/SDKSessionModal/SDKSessionModal';
+import ExperienceEnhancerModal from '../../../../app/components/Views/ExperienceEnhancerModal';
 import { MetaMetrics } from '../../../core/Analytics';
 import trackErrorAsAnalytics from '../../../util/metrics/TrackError/trackErrorAsAnalytics';
 import generateDeviceAnalyticsMetaData from '../../../util/metrics/DeviceAnalyticsMetaData/generateDeviceAnalyticsMetaData';
@@ -612,6 +614,14 @@ const App = ({ userLoggedIn }) => {
         name={Routes.SHEET.SDK_MANAGE_CONNECTIONS}
         component={SDKSessionModal}
       />
+      <Stack.Screen
+        name={Routes.SHEET.EXPERIENCE_ENHANCER}
+        component={ExperienceEnhancerModal}
+      />
+      <Stack.Screen
+        name={Routes.SHEET.DATA_COLLECTION}
+        component={DataCollectionModal}
+      />
       <Stack.Screen
         name={Routes.SHEET.SDK_DISCONNECT}
         component={SDKDisconnectModal}

diff --git a/app/components/UI/OptinMetrics/index.js b/app/components/UI/OptinMetrics/index.js
@@ -17,6 +17,7 @@ import { strings } from '../../../../locales/i18n';
 import setOnboardingWizardStep from '../../../actions/wizard';
 import { connect } from 'react-redux';
 import { clearOnboardingEvents } from '../../../actions/onboarding';
+import { setDataCollectionForMarketing } from '../../../actions/security';
 import { ONBOARDING_WIZARD } from '../../../constants/storage';
 import AppConstants from '../../../core/AppConstants';
 import {
@@ -26,20 +27,18 @@ import {
 import DefaultPreference from 'react-native-default-preference';
 import { ThemeContext } from '../../../util/theme';
 import { MetaMetricsOptInSelectorsIDs } from '../../../../e2e/selectors/Onboarding/MetaMetricsOptIn.selectors';
+import Checkbox from '../../../component-library/components/Checkbox';
 import Button, {
   ButtonVariants,
   ButtonSize,
 } from '../../../component-library/components/Buttons/Button';
 import { MAINNET } from '../../../constants/network';
-import { newPrivacyPolicyDate } from '../../../reducers/legalNotices';
+import { isPastPrivacyPolicyDate } from '../../../reducers/legalNotices';
 import Routes from '../../../constants/navigation/Routes';
 import generateDeviceAnalyticsMetaData, {
   UserSettingsAnalyticsMetaData as generateUserSettingsAnalyticsMetaData,
 } from '../../../util/metrics';
 
-const currentDate = new Date(Date.now());
-const isPastPrivacyPolicyDate = currentDate >= newPrivacyPolicyDate;
-
 const createStyles = ({ colors }) =>
   StyleSheet.create({
     root: {
@@ -52,6 +51,13 @@ const createStyles = ({ colors }) =>
     crossIcon: {
       color: colors.error.default,
     },
+    checkbox: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 15,
+      marginRight: 25,
+    },
     icon: {
       marginRight: 5,
     },
@@ -118,6 +124,8 @@ const createStyles = ({ colors }) =>
  */
 class OptinMetrics extends PureComponent {
   static propTypes = {
+    isDataCollectionForMarketingEnabled: PropTypes.bool,
+    setDataCollectionForMarketing: PropTypes.func,
     /**
     /* navigation object required to push and pop other views
     */
@@ -337,6 +345,21 @@ class OptinMetrics extends PureComponent {
 
       this.props.clearOnboardingEvents();
 
+      if (this.props.isDataCollectionForMarketingEnabled) {
+        const traits = {
+          is_metrics_opted_in: true,
+          has_marketing_consent: Boolean(
+            this.props.setDataCollectionForMarketing,
+          ),
+        };
+
+        metrics.addTraitsToUser(traits);
+        metrics.trackEvent(MetaMetricsEvents.ANALYTICS_PREFERENCE_SELECTED, {
+          ...traits,
+          location: 'onboarding_metametrics',
+        });
+      }
+
       // track event for user opting in
       metrics.trackEvent(MetaMetricsEvents.ANALYTICS_PREFERENCE_SELECTED, {
         analytics_option_selected: 'Metrics Opt In',
@@ -524,6 +547,11 @@ class OptinMetrics extends PureComponent {
   };
 
   render() {
+    const {
+      isDataCollectionForMarketingEnabled,
+      setDataCollectionForMarketing,
+    } = this.props;
+
     const styles = this.getStyles();
 
     return (
@@ -569,6 +597,23 @@ class OptinMetrics extends PureComponent {
                 ? this.renderAction(action, i)
                 : this.renderLegacyAction(action, i),
             )}
+            {isPastPrivacyPolicyDate ? (
+              <View style={styles.checkbox}>
+                <Checkbox
+                  isChecked={isDataCollectionForMarketingEnabled}
+                  accessibilityRole={'checkbox'}
+                  accessible
+                  onPress={() =>
+                    setDataCollectionForMarketing(
+                      !isDataCollectionForMarketingEnabled,
+                    )
+                  }
+                />
+                <Text style={styles.content}>
+                  {strings('privacy_policy.checkbox')}
+                </Text>
+              </View>
+            ) : null}
             {this.renderPrivacyPolicy()}
           </View>
         </ScrollView>
@@ -582,11 +627,15 @@ OptinMetrics.contextType = ThemeContext;
 
 const mapStateToProps = (state) => ({
   events: state.onboarding.events,
+  isDataCollectionForMarketingEnabled:
+    state.security.dataCollectionForMarketing,
 });
 
 const mapDispatchToProps = (dispatch) => ({
   setOnboardingWizardStep: (step) => dispatch(setOnboardingWizardStep(step)),
   clearOnboardingEvents: () => dispatch(clearOnboardingEvents()),
+  setDataCollectionForMarketing: (value) =>
+    dispatch(setDataCollectionForMarketing(value)),
 });
 
 export default connect(