fix: Fix unit and e2e tests that were expected the date based privacy policy components to not be shown

test/e2e/default-fixture.js

@@ -107,6 +107,8 @@ function defaultFixture(inputChainId = CHAIN_IDS.LOCALHOST) {
           '__FIXTURE_SUBSTITUTION__currentDateInMilliseconds',
         showTestnetMessageInDropdown: true,
         trezorModel: null,
+        newPrivacyPolicyToastClickedOrClosed: true,
+        newPrivacyPolicyToastShownDate: Date.now(),
         usedNetworks: {
           [CHAIN_IDS.MAINNET]: true,
           [CHAIN_IDS.LINEA_MAINNET]: true,

test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json

@@ -39,8 +39,8 @@
     "showAccountBanner": true,
     "trezorModel": null,
     "onboardingDate": "object",
-    "newPrivacyPolicyToastClickedOrClosed": "object",
-    "newPrivacyPolicyToastShownDate": "object",
+    "newPrivacyPolicyToastClickedOrClosed": "boolean",
+    "newPrivacyPolicyToastShownDate": "number",
     "hadAdvancedGasFeesSetPriorToMigration92_3": false,
     "nftsDropdownState": {},
     "termsOfUseLastAgreed": "number",

test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json

@@ -75,8 +75,8 @@
     "showAccountBanner": true,
     "trezorModel": null,
     "onboardingDate": "object",
-    "newPrivacyPolicyToastClickedOrClosed": "object",
-    "newPrivacyPolicyToastShownDate": "object",
+    "newPrivacyPolicyToastClickedOrClosed": "boolean",
+    "newPrivacyPolicyToastShownDate": "number",
     "hadAdvancedGasFeesSetPriorToMigration92_3": false,
     "nftsDropdownState": {},
     "termsOfUseLastAgreed": "number",

test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json

@@ -46,6 +46,8 @@
         "0x5": true,
         "0x539": true
       },
+      "newPrivacyPolicyToastClickedOrClosed": "boolean",
+      "newPrivacyPolicyToastShownDate": "number",
       "snapsInstallPrivacyWarningShown": true
     },
     "CurrencyController": {

test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-ui-state.json

@@ -46,6 +46,8 @@
         "0x5": true,
         "0x539": true
       },
+      "newPrivacyPolicyToastClickedOrClosed": "boolean",
+      "newPrivacyPolicyToastShownDate": "number",
       "snapsInstallPrivacyWarningShown": true
     },
     "CurrencyController": {

ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap

@@ -4,55 +4,41 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
 <div>
   <div
     class="onboarding-metametrics"
-    data-testid="onboarding-legacy-metametrics"
+    data-testid="onboarding-metametrics"
   >
     <h2
       class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h2 typography--weight-bold typography--style-normal typography--align-center typography--color-text-default"
     >
       Help us improve MetaMask
     </h2>
     <p
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__desc typography--p typography--weight-normal typography--style-normal typography--align-center typography--color-text-default"
+      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__desc typography--p typography--weight-normal typography--style-normal typography--align-left typography--color-text-default"
     >
-      MetaMask would like to gather usage data to better understand how our users interact with MetaMask. This data will be used to provide the service, which includes improving the service based on your use.
+      We’d like to gather basic usage and diagnostics data to improve MetaMask. Know that we never sell the data you provide here.
     </p>
     <p
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__desc typography--p typography--weight-normal typography--style-normal typography--align-center typography--color-text-default"
+      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__desc typography--p typography--weight-normal typography--style-normal typography--align-left typography--color-text-default"
     >
-      MetaMask will...
+      When we gather metrics, it will always be...
     </p>
     <ul>
-      <li>
-        <span
-          class="mm-box mm-icon mm-icon--size-md mm-box--margin-inline-end-3 mm-box--display-inline-block mm-box--color-success-default"
-          style="mask-image: url('./images/icons/check.svg');"
-        />
-        Always allow you to opt-out via Settings
-      </li>
-      <li>
-        <span
-          class="mm-box mm-icon mm-icon--size-md mm-box--margin-inline-end-3 mm-box--display-inline-block mm-box--color-success-default"
-          style="mask-image: url('./images/icons/check.svg');"
-        />
-        Send anonymized click and pageview events
-      </li>
       <li>
         <div
           class="box box--flex-direction-row"
         >
           <span
-            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-error-default"
-            style="mask-image: url('./images/icons/close.svg');"
+            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-success-default"
+            style="mask-image: url('./images/icons/check.svg');"
           />
           <span>
 
 
             <span
               class="box box--margin-bottom-1 box--flex-direction-row typography typography--span typography--weight-bold typography--style-normal typography--color-text-default"
             >
-              Never
+              Private:
             </span>
-             collect information we don’t need to provide the service (such as keys, addresses, transaction hashes, or balances)
+             clicks and views on the app are stored, but other details (like your public address) are not.
 
           </span>
         </div>
@@ -62,18 +48,18 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
           class="box box--flex-direction-row"
         >
           <span
-            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-error-default"
-            style="mask-image: url('./images/icons/close.svg');"
+            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-success-default"
+            style="mask-image: url('./images/icons/check.svg');"
           />
           <span>
 
 
             <span
               class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--span typography--weight-bold typography--style-normal typography--color-text-default"
             >
-              Never
+              General:
             </span>
-             collect your full IP address*
+             we temporarily use your IP address to detect a general location (like your country or region), but it's never stored.
 
           </span>
         </div>
@@ -83,51 +69,56 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `
           class="box box--flex-direction-row"
         >
           <span
-            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-error-default"
-            style="mask-image: url('./images/icons/close.svg');"
+            class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-end-2 mm-box--display-inline-block mm-box--color-success-default"
+            style="mask-image: url('./images/icons/check.svg');"
           />
           <span>
 
 
             <span
               class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--span typography--weight-bold typography--style-normal typography--color-text-default"
             >
-              Never
+              Optional:
             </span>
-             sell data.  Ever!
+             you decide if you want to share or delete your usage data via settings any time.
 
           </span>
         </div>
 
       </li>
     </ul>
-    <h6
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__terms typography--h6 typography--weight-normal typography--style-normal typography--align-center typography--color-text-alternative"
+    <label
+      class="mm-box mm-text mm-checkbox mm-text--body-md mm-box--padding-bottom-3 mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
+      for="metametrics-opt-in"
     >
-      This data is aggregated and is therefore anonymous for the purposes of General Data Protection Regulation (EU) 2016/679.
-    </h6>
+      <span
+        class="mm-checkbox__input-wrapper"
+      >
+        <input
+          class="mm-box mm-checkbox__input mm-box--margin-0 mm-box--margin-right-2 mm-box--display-flex mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-color-border-default mm-box--border-width-2 box--border-style-solid"
+          id="metametrics-opt-in"
+          title="We’ll use this data to learn how you interact with our marketing communications. We may share relevant news (like product features)."
+          type="checkbox"
+        />
+      </span>
+      <span>
+        We’ll use this data to learn how you interact with our marketing communications. We may share relevant news (like product features).
+      </span>
+    </label>
     <h6
-      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__terms typography--h6 typography--weight-normal typography--style-normal typography--align-center typography--color-text-alternative"
+      class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography onboarding-metametrics__terms typography--h6 typography--weight-normal typography--style-normal typography--align-left typography--color-text-alternative"
     >
       <span>
 
-        * When you use Infura as your default RPC provider in MetaMask, Infura will collect your IP address and your Ethereum wallet address when you send a transaction. We don’t store this information in a way that allows our systems to associate those two pieces of data. For more information on how MetaMask and Infura interact from a data collection perspective, see our update 
-        <a
-          href="https://consensys.io/blog/consensys-data-retention-update"
-          rel="noopener noreferrer"
-          target="_blank"
-        >
-          here
-        </a>
-        . For more information on our privacy practices in general, see our 
+        We’ll let you know if we decide to use this data for other purposes. You can review our 
         <a
           href="https://metamask.io/privacy.html"
           rel="noopener noreferrer"
           target="_blank"
         >
-          Privacy Policy here
+          Privacy Policy
         </a>
-        .
+         for more information. Remember, you can go to settings and opt out at any time.
 
       </span>
     </h6>

ui/pages/onboarding-flow/onboarding-flow.test.js

@@ -244,9 +244,7 @@ describe('Onboarding Flow', () => {
       ONBOARDING_METAMETRICS,
     );
 
-    const onboardingMetametrics = queryByTestId(
-      'onboarding-legacy-metametrics',
-    );
+    const onboardingMetametrics = queryByTestId('onboarding-metametrics');
     expect(onboardingMetametrics).toBeInTheDocument();
   });
 

ui/pages/routes/routes.component.test.js

@@ -114,6 +114,7 @@ describe('Routes Component', () => {
             ticker: 'ETH',
             type: NETWORK_TYPES.MAINNET,
           },
+          newPrivacyPolicyToastShownDate: new Date('0'),
         },
         send: {
           ...mockSendState.send,
@@ -130,7 +131,7 @@ describe('Routes Component', () => {
 });
 
 describe('toast display', () => {
-  const testState = {
+  const getToastDisplayTestState = (date) => ({
     ...mockState,
     metamask: {
       ...mockState.metamask,
@@ -139,17 +140,21 @@ describe('toast display', () => {
       completedOnboarding: true,
       usedNetworks: [],
       swapsState: { swapsFeatureIsLive: true },
+      newPrivacyPolicyToastShownDate: date,
     },
-  };
+  });
 
   it('renders toastContainer on default route', async () => {
-    await render([DEFAULT_ROUTE], testState);
+    await render([DEFAULT_ROUTE], getToastDisplayTestState(new Date('9999')));
     const toastContainer = document.querySelector('.toasts-container');
     expect(toastContainer).toBeInTheDocument();
   });
 
   it('does not render toastContainer on confirmation route', async () => {
-    await render([CONFIRMATION_V_NEXT_ROUTE], testState);
+    await render(
+      [CONFIRMATION_V_NEXT_ROUTE],
+      getToastDisplayTestState(new Date(0)),
+    );
     const toastContainer = document.querySelector('.toasts-container');
     expect(toastContainer).not.toBeInTheDocument();
   });