feat: display full terms of service during onboarding

shared/modules/bridge-utils/bridge.util.test.ts

@@ -149,7 +149,7 @@ describe('Bridge utils', () => {
 
       (fetchWithCache as jest.Mock).mockRejectedValue(mockError);
 
-      await expect(fetchBridgeFeatureFlags()).rejects.toThrowError(mockError);
+      await expect(fetchBridgeFeatureFlags()).rejects.toThrow(mockError);
     });
   });
 
@@ -223,7 +223,7 @@ describe('Bridge utils', () => {
 
       (fetchWithCache as jest.Mock).mockRejectedValue(mockError);
 
-      await expect(fetchBridgeTokens('0xa')).rejects.toThrowError(mockError);
+      await expect(fetchBridgeTokens('0xa')).rejects.toThrow(mockError);
     });
   });
 

test/e2e/page-objects/flows/onboarding.flow.ts

@@ -35,7 +35,6 @@ export const createNewWalletOnboardingFlow = async ({
   }
   const startOnboardingPage = new StartOnboardingPage(driver);
   await startOnboardingPage.check_pageIsLoaded();
-  await startOnboardingPage.checkTermsCheckbox();
   await startOnboardingPage.clickCreateWalletButton();
 
   const onboardingMetricsPage = new OnboardingMetricsPage(driver);
@@ -80,7 +79,6 @@ export const importSRPOnboardingFlow = async ({
 
   const startOnboardingPage = new StartOnboardingPage(driver);
   await startOnboardingPage.check_pageIsLoaded();
-  await startOnboardingPage.checkTermsCheckbox();
   await startOnboardingPage.clickImportWalletButton();
 
   const onboardingMetricsPage = new OnboardingMetricsPage(driver);

test/e2e/page-objects/pages/onboarding/start-onboarding-page.ts

@@ -14,18 +14,20 @@ class StartOnboardingPage {
     tag: 'h2',
   };
 
+  private readonly termsModal = '[data-testid="terms-of-use-modal-body"]';
+
   private readonly termsCheckbox = '[data-testid="onboarding-terms-checkbox"]';
 
+  private readonly termsConfirmButton =
+    '[data-testid="onboarding-terms-accept"]';
+
   constructor(driver: Driver) {
     this.driver = driver;
   }
 
   async check_pageIsLoaded(): Promise<void> {
     try {
-      await this.driver.waitForMultipleSelectors([
-        this.startMessage,
-        this.termsCheckbox,
-      ]);
+      await this.driver.waitForMultipleSelectors([this.startMessage]);
     } catch (e) {
       console.log(
         'Timeout while waiting for start onboarding page to be loaded',
@@ -37,15 +39,32 @@ class StartOnboardingPage {
   }
 
   async checkTermsCheckbox(): Promise<void> {
+    await this.driver.waitForSelector(this.termsModal);
+
+    await this.driver.executeScript(`
+      const modalBody = document.querySelector('[data-testid="terms-of-use-modal-body"]');
+      if (modalBody) {
+        modalBody.scrollTo({ top: modalBody.scrollHeight, behavior: 'instant' });
+      }
+    `);
+
+    await this.driver.findClickableElement(this.termsCheckbox);
     await this.driver.clickElement(this.termsCheckbox);
+
+    await this.driver.findClickableElement(this.termsConfirmButton);
+    await this.driver.clickElement(this.termsConfirmButton);
   }
 
   async clickCreateWalletButton(): Promise<void> {
-    await this.driver.clickElementAndWaitToDisappear(this.createWalletButton);
+    await this.driver.findClickableElement(this.createWalletButton);
+    await this.driver.clickElement(this.createWalletButton);
+    await this.checkTermsCheckbox();
   }
 
   async clickImportWalletButton(): Promise<void> {
-    await this.driver.clickElementAndWaitToDisappear(this.importWalletButton);
+    await this.driver.findClickableElement(this.importWalletButton);
+    await this.driver.clickElement(this.importWalletButton);
+    await this.checkTermsCheckbox();
   }
 }
 

test/e2e/playwright/shared/pageObjects/signup-page.ts

@@ -79,10 +79,32 @@ export class SignUpPage {
     this.enableBtn = page.locator('button:has-text("Enable")');
   }
 
-  async importWallet() {
+  private async handleTermsModal() {
+    console.log('Waiting for terms modal...');
+    await this.page.waitForSelector('[data-testid="terms-of-use-modal-body"]');
+    console.log('Found terms modal');
+
+    console.log('Scrolling modal to bottom...');
+    await this.page.evaluate(`
+      const modalBody = document.querySelector('[data-testid="terms-of-use-modal-body"]');
+      if (modalBody) {
+        modalBody.scrollTo({ top: modalBody.scrollHeight, behavior: 'instant' });
+        console.log('Modal scrolled');
+      } else {
+        console.log('Modal body not found');
+      }
+    `);
+
+    console.log('Clicking terms checkbox...');
     await this.agreeTandCCheck.click();
+    console.log('Clicking accept button...');
+    await this.page.getByTestId('onboarding-terms-accept').click();
+    console.log('Terms accepted');
+  }
+
+  async importWallet() {
     await this.importWalletBtn.click();
-    await this.agreeBtn.click();
+    await this.handleTermsModal();
 
     const seeds = SEED_PHRASE?.trim().split(/\s+/u);
     for (const [index, element] of (seeds as string[]).entries()) {
@@ -101,8 +123,8 @@ export class SignUpPage {
   }
 
   async createWallet() {
-    await this.agreeTandCCheck.click();
     await this.createWalletBtn.click();
+    await this.handleTermsModal();
     await this.metametricsBtn.click();
     await this.passwordTxt.fill(ACCOUNT_PASSWORD as string);
     await this.passwordConfirmTxt.fill(ACCOUNT_PASSWORD as string);

test/e2e/tests/account/incremental-security.spec.js

@@ -1,6 +1,8 @@
 const { strict: assert } = require('assert');
 const { convertToHexValue, withFixtures, openDapp } = require('../../helpers');
 const FixtureBuilder = require('../../fixture-builder');
+const StartOnboardingPage =
+  require('../../page-objects/pages/onboarding/start-onboarding-page').default;
 
 const WALLET_PASSWORD = 'correct horse battery staple';
 
@@ -31,11 +33,10 @@ describe('Incremental Security', function () {
       },
       async ({ driver }) => {
         await driver.navigate();
-        // agree to terms of use
-        await driver.clickElement('[data-testid="onboarding-terms-checkbox"]');
-
         // welcome
-        await driver.clickElement('[data-testid="onboarding-create-wallet"]');
+        const startOnboardingPage = new StartOnboardingPage(driver);
+        await startOnboardingPage.check_pageIsLoaded();
+        await startOnboardingPage.clickCreateWalletButton();
 
         // metrics
         await driver.clickElement('[data-testid="metametrics-no-thanks"]');

test/e2e/tests/metrics/app-installed.spec.ts

@@ -47,7 +47,6 @@ describe('App Installed Events @no-mmi', function () {
         await driver.navigate();
         const startOnboardingPage = new StartOnboardingPage(driver);
         await startOnboardingPage.check_pageIsLoaded();
-        await startOnboardingPage.checkTermsCheckbox();
         await startOnboardingPage.clickCreateWalletButton();
 
         const onboardingMetricsPage = new OnboardingMetricsPage(driver);
@@ -81,7 +80,6 @@ describe('App Installed Events @no-mmi', function () {
         await driver.navigate();
         const startOnboardingPage = new StartOnboardingPage(driver);
         await startOnboardingPage.check_pageIsLoaded();
-        await startOnboardingPage.checkTermsCheckbox();
         await startOnboardingPage.clickCreateWalletButton();
 
         const onboardingMetricsPage = new OnboardingMetricsPage(driver);

test/e2e/tests/onboarding/onboarding.spec.ts

@@ -78,7 +78,6 @@ describe('MetaMask onboarding @no-mmi', function () {
         await driver.navigate();
         const startOnboardingPage = new StartOnboardingPage(driver);
         await startOnboardingPage.check_pageIsLoaded();
-        await startOnboardingPage.checkTermsCheckbox();
         await startOnboardingPage.clickImportWalletButton();
 
         const onboardingMetricsPage = new OnboardingMetricsPage(driver);
@@ -106,7 +105,6 @@ describe('MetaMask onboarding @no-mmi', function () {
         await driver.navigate();
         const startOnboardingPage = new StartOnboardingPage(driver);
         await startOnboardingPage.check_pageIsLoaded();
-        await startOnboardingPage.checkTermsCheckbox();
         await startOnboardingPage.clickImportWalletButton();
 
         const onboardingMetricsPage = new OnboardingMetricsPage(driver);
@@ -131,7 +129,6 @@ describe('MetaMask onboarding @no-mmi', function () {
         await driver.navigate();
         const startOnboardingPage = new StartOnboardingPage(driver);
         await startOnboardingPage.check_pageIsLoaded();
-        await startOnboardingPage.checkTermsCheckbox();
         await startOnboardingPage.clickCreateWalletButton();
 
         const onboardingMetricsPage = new OnboardingMetricsPage(driver);