feat(3765): Add modal to include metric id before redirecting to support page

test/e2e/page-objects/pages/error-page.ts

@@ -35,6 +35,15 @@ class ErrorPage {
   private readonly sentryFeedbackSuccessModal =
     '[data-testid="error-page-sentry-feedback-success-modal"]';
 
+  private readonly visitSupportDataConsentModal =
+    '[data-testid="visit-support-data-consent-modal"]';
+
+  private readonly visitSupportDataConsentModalAcceptButton =
+    '[data-testid="visit-support-data-consent-modal-accept-button"]';
+
+  private readonly visitSupportDataConsentModalRejectButton =
+    '[data-testid="visit-support-data-consent-modal-reject-button"]';
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
@@ -78,14 +87,29 @@ class ErrorPage {
     );
   }
 
-  async contactAndValidateMetaMaskSupport(): Promise<void> {
+  async clickContactButton(): Promise<void> {
     console.log(`Contact metamask support form in a separate page`);
     await this.driver.waitUntilXWindowHandles(1);
     await this.driver.clickElement(this.contactSupportButton);
+  }
+
+  async consentDataToMetamaskSupport(): Promise<void> {
+    await this.driver.waitForSelector(this.visitSupportDataConsentModal);
+    await this.driver.clickElementAndWaitToDisappear(
+      this.visitSupportDataConsentModalAcceptButton,
+    );
     // metamask, help page
     await this.driver.waitUntilXWindowHandles(2);
   }
 
+  async rejectDataToMetamaskSupport(): Promise<void> {
+    await this.driver.waitForSelector(this.visitSupportDataConsentModal);
+    await this.driver.clickElementAndWaitToDisappear(
+      this.visitSupportDataConsentModalRejectButton,
+    );
+    await this.driver.waitUntilXWindowHandles(2);
+  }
+
   async waitForSentrySuccessModal(): Promise<void> {
     await this.driver.waitForSelector(this.sentryFeedbackSuccessModal);
     await this.driver.assertElementNotPresent(this.sentryFeedbackSuccessModal);

test/e2e/tests/metrics/developer-options-sentry.spec.ts

@@ -8,6 +8,7 @@ import SettingsPage from '../../page-objects/pages/settings/settings-page';
 import HeaderNavbar from '../../page-objects/pages/header-navbar';
 import DevelopOptions from '../../page-objects/pages/developer-options-page';
 import ErrorPage from '../../page-objects/pages/error-page';
+import { MOCK_META_METRICS_ID } from '../../constants';
 
 const triggerCrash = async (driver: Driver): Promise<void> => {
   const headerNavbar = new HeaderNavbar(driver);
@@ -41,7 +42,7 @@ describe('Developer Options - Sentry', function (this: Suite) {
       {
         fixtures: new FixtureBuilder()
           .withMetaMetricsController({
-            metaMetricsId: 'fake-metrics-id',
+            metaMetricsId: MOCK_META_METRICS_ID,
             participateInMetaMetrics: true,
           })
           .build(),
@@ -64,7 +65,35 @@ describe('Developer Options - Sentry', function (this: Suite) {
     );
   });
 
-  it('gives option to cause a page crash and offer contact support option', async function () {
+  it('gives option to cause a page crash and offer contact support option with consenting to share data', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder()
+          .withMetaMetricsController({
+            metaMetricsId: MOCK_META_METRICS_ID,
+            participateInMetaMetrics: true,
+          })
+          .build(),
+        title: this.test?.fullTitle(),
+        ignoredConsoleErrors: [
+          'Error#1: Unable to find value of key "developerOptions" for locale "en"',
+          'React will try to recreate this component tree from scratch using the error boundary you provided, Index.',
+        ],
+      },
+      async ({ driver }: { driver: Driver }) => {
+        await loginWithBalanceValidation(driver);
+        await triggerCrash(driver);
+
+        const errorPage = new ErrorPage(driver);
+        await errorPage.check_pageIsLoaded();
+
+        await errorPage.clickContactButton();
+        await errorPage.consentDataToMetamaskSupport();
+      },
+    );
+  });
+
+  it('gives option to cause a page crash and offer contact support option with rejecting to share data', async function () {
     await withFixtures(
       {
         fixtures: new FixtureBuilder().build(),
@@ -81,7 +110,8 @@ describe('Developer Options - Sentry', function (this: Suite) {
         const errorPage = new ErrorPage(driver);
         await errorPage.check_pageIsLoaded();
 
-        await errorPage.contactAndValidateMetaMaskSupport();
+        await errorPage.clickContactButton();
+        await errorPage.rejectDataToMetamaskSupport();
       },
     );
   });

ui/components/app/modals/index.scss

@@ -7,6 +7,7 @@
 @import 'transaction-confirmed/index';
 @import 'customize-nonce/index';
 @import 'convert-token-to-nft-modal/index';
+@import 'visit-support-data-consent-modal/index';
 
 .modal {
   z-index: 1050;

ui/components/app/modals/visit-support-data-consent-modal/__snapshots__/visit-support-data.test.tsx.snap

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`VisitSupportDataConsentModal renders the modal correctly when open 1`] = `
+<div
+  class="mm-modal visit-support-data-consent-modal"
+  data-testid="visit-support-data-consent-modal"
+>
+  <div
+    aria-hidden="true"
+    class="mm-box mm-modal-overlay mm-box--width-full mm-box--height-full mm-box--background-color-overlay-default"
+  />
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+  <div
+    data-focus-lock-disabled="false"
+  >
+    <div
+      class="mm-box mm-modal-content mm-box--padding-top-4 mm-box--sm:padding-top-8 mm-box--md:padding-top-12 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--sm:padding-bottom-8 mm-box--md:padding-bottom-12 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
+    >
+      <section
+        aria-modal="true"
+        class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
+        role="dialog"
+      >
+        <header
+          class="mm-box mm-header-base mm-modal-header mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between"
+        >
+          <div
+            class="mm-box mm-box--width-full"
+          >
+            <h4
+              class="mm-box mm-text mm-text--heading-sm mm-text--text-align-center mm-box--color-text-default"
+            >
+              Share device details with support
+            </h4>
+          </div>
+        </header>
+        <div
+          class="mm-box mm-modal-body visit-support-data-consent-modal__body mm-box--padding-right-4 mm-box--padding-left-4"
+        >
+          <p
+            class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+          >
+            Do you want to share your MetaMask Identifier and app version with our Support Center? This can help us better solve your problem, but is optional.
+          </p>
+        </div>
+        <div
+          class="mm-box mm-modal-footer mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-left-4"
+        >
+          <div
+            class="mm-box mm-box--display-flex mm-box--gap-4"
+          >
+            <button
+              class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/2 mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
+              data-testid="visit-support-data-consent-modal-reject-button"
+            >
+              Don’t share
+            </button>
+            <button
+              class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-1/2 mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+              data-testid="visit-support-data-consent-modal-accept-button"
+              data-theme="light"
+            >
+              Confirm
+            </button>
+          </div>
+          <div
+            class="mm-box mm-container mm-container--max-width-sm mm-box--margin-right-auto mm-box--margin-left-auto mm-box--display-flex mm-box--gap-4 mm-box--flex-wrap-wrap mm-box--align-items-center"
+          />
+        </div>
+      </section>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="0"
+  />
+</div>
+`;

ui/components/app/modals/visit-support-data-consent-modal/index.scss

@@ -0,0 +1,10 @@
+@use 'design-system';
+
+.visit-support-data-consent-modal {
+  &__body {
+    &__preference-checkbox {
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
+  }
+}

ui/components/app/modals/visit-support-data-consent-modal/index.ts

@@ -0,0 +1 @@
+export { default } from './visit-support-data-consent-modal';

ui/components/app/modals/visit-support-data-consent-modal/visit-support-data-consent-modal.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import VisitSupportDataConsentModal from '.';
+
+export default {
+  title: 'Components/App/Modals/VisitSupportDataConsentModal',
+};
+
+export const DefaultStory = () => (
+  <VisitSupportDataConsentModal
+    isOpen
+    onClose={() => {}}
+  />
+);
+
+DefaultStory.storyName = 'Default';