cherrypick feat: stx opt-in modal "Manage in settings" variation (#24771) into v11.16.1 (#24841)

cherrypick feat: stx opt-in modal "Manage in settings" variation
82fe51c (#24771) into v11.16.1

No merge conflicts

Co-authored-by: Daniel <[email protected]>

Author: dbrans

app/_locales/en/messages.json

@@ -13,7 +13,7 @@ export class MMISignUpPage {
 
   readonly agreeBtn: Locator;
 
-  readonly noThanksBtn: Locator;
+  readonly enableBtn: Locator;
 
   readonly passwordTxt: Locator;
 
@@ -44,9 +44,7 @@ export class MMISignUpPage {
       'button:has-text("Confirm Secret Recovery Phrase")',
     );
     this.agreeBtn = page.locator('button:has-text("I agree")');
-    this.noThanksBtn = page.locator(
-      'button:has-text("Don\'t enable enhanced protection")',
-    );
+    this.enableBtn = page.locator('button:has-text("Enable")'); // It shows in the Smart Transactions Opt-In Modal.
     this.passwordTxt = page.getByTestId('create-password-new');
     this.passwordConfirmTxt = page.getByTestId('create-password-confirm');
     this.agreeCheck = page.getByTestId('create-new-vault__terms-checkbox');

test/e2e/mmi/pageObjects/mmi-signup-page.ts

@@ -50,12 +50,13 @@ async function getExtensionStorageFilePath(driver) {
  */
 async function closePopoverIfPresent(driver) {
   const popoverButtonSelector = '[data-testid="popover-close"]';
-  const linkNoThanks = {
-    text: "Don't enable enhanced protection",
+  // It shows in the Smart Transactions Opt-In Modal.
+  const enableButtonSelector = {
+    text: 'Enable',
     tag: 'button',
   };
   await driver.clickElementSafe(popoverButtonSelector);
-  await driver.clickElementSafe(linkNoThanks);
+  await driver.clickElementSafe(enableButtonSelector);
 }
 
 /**

test/e2e/vault-decryption-chrome.spec.js

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SmartTransactionsOptInModal displays the correct text in the modal 1`] = `<div />`;

ui/components/app/smart-transactions/__snapshots__/smart-transactions-opt-in-modal.test.tsx.snap

@@ -0,0 +1,74 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import thunk from 'redux-thunk';
+import configureMockStore from 'redux-mock-store';
+import { useHistory } from 'react-router-dom';
+
+import {
+  renderWithProvider,
+  createSwapsMockStore,
+} from '../../../../test/jest';
+import { setSmartTransactionsOptInStatus } from '../../../store/actions';
+import { ADVANCED_ROUTE } from '../../../helpers/constants/routes';
+import SmartTransactionsOptInModal from './smart-transactions-opt-in-modal';
+
+const middleware = [thunk];
+
+jest.mock('../../../store/actions');
+
+describe('SmartTransactionsOptInModal', () => {
+  it('displays the correct text in the modal', () => {
+    const store = configureMockStore(middleware)(createSwapsMockStore());
+    const { getByText, container } = renderWithProvider(
+      <SmartTransactionsOptInModal
+        isOpen={true}
+        hideWhatsNewPopup={jest.fn()}
+      />,
+      store,
+    );
+    expect(getByText('Enable')).toBeInTheDocument();
+    expect(getByText('Manage in settings')).toBeInTheDocument();
+    expect(container).toMatchSnapshot();
+  });
+
+  it('calls setSmartTransactionsOptInStatus with false when the "Manage in settings" link is clicked and redirects to Advanced Settings', () => {
+    (setSmartTransactionsOptInStatus as jest.Mock).mockImplementationOnce(() =>
+      jest.fn(),
+    );
+    const historyPushMock = jest.fn();
+    (useHistory as jest.Mock).mockImplementationOnce(() => ({
+      push: historyPushMock,
+    }));
+    const store = configureMockStore(middleware)(createSwapsMockStore());
+    const { getByText } = renderWithProvider(
+      <SmartTransactionsOptInModal
+        isOpen={true}
+        hideWhatsNewPopup={jest.fn()}
+      />,
+      store,
+    );
+    const manageInSettingsLink = getByText('Manage in settings');
+    fireEvent.click(manageInSettingsLink);
+    expect(setSmartTransactionsOptInStatus).toHaveBeenCalledWith(false);
+    expect(historyPushMock).toHaveBeenCalledWith(
+      `${ADVANCED_ROUTE}#smart-transactions`,
+    );
+  });
+
+  it('calls setSmartTransactionsOptInStatus with true when the "Enable" button is clicked', () => {
+    (setSmartTransactionsOptInStatus as jest.Mock).mockImplementationOnce(() =>
+      jest.fn(),
+    );
+    const store = configureMockStore(middleware)(createSwapsMockStore());
+    const { getByText } = renderWithProvider(
+      <SmartTransactionsOptInModal
+        isOpen={true}
+        hideWhatsNewPopup={jest.fn()}
+      />,
+      store,
+    );
+    const enableButton = getByText('Enable');
+    fireEvent.click(enableButton);
+    expect(setSmartTransactionsOptInStatus).toHaveBeenCalledWith(true);
+  });
+});

ui/components/app/smart-transactions/smart-transactions-opt-in-modal.test.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -30,6 +31,7 @@ import {
 } from '../../component-library';
 import { setSmartTransactionsOptInStatus } from '../../../store/actions';
 import { SMART_TRANSACTIONS_LEARN_MORE_URL } from '../../../../shared/constants/smartTransactions';
+import { ADVANCED_ROUTE } from '../../../helpers/constants/routes';
 
 export type SmartTransactionsOptInModalProps = {
   isOpen: boolean;
@@ -73,10 +75,10 @@ const EnableSmartTransactionsButton = ({
   );
 };
 
-const NoThanksLink = ({
-  handleNoThanksLinkClick,
+const ManageInSettingsLink = ({
+  handleManageInSettingsLinkClick,
 }: {
-  handleNoThanksLinkClick: () => void;
+  handleManageInSettingsLinkClick: () => void;
 }) => {
   const t = useI18nContext();
   return (
@@ -85,11 +87,11 @@ const NoThanksLink = ({
       type="link"
       variant={ButtonVariant.Link}
       color={TextColor.textAlternative}
-      onClick={handleNoThanksLinkClick}
+      onClick={handleManageInSettingsLinkClick}
       width={BlockSize.Full}
       className="mm-smart-transactions-opt-in-modal__no-thanks-link"
     >
-      {t('dontEnableEnhancedProtection')}
+      {t('manageInSettings')}
     </Button>
   );
 };
@@ -164,13 +166,16 @@ export default function SmartTransactionsOptInModal({
 }: SmartTransactionsOptInModalProps) {
   const t = useI18nContext();
   const dispatch = useDispatch();
+  const history = useHistory();
 
   const handleEnableButtonClick = useCallback(() => {
     dispatch(setSmartTransactionsOptInStatus(true));
   }, [dispatch]);
 
-  const handleNoThanksLinkClick = useCallback(() => {
+  const handleManageInSettingsLinkClick = useCallback(() => {
+    // Set the Smart Transactions opt-in status to false, so the opt-in modal is not shown again.
     dispatch(setSmartTransactionsOptInStatus(false));
+    history.push(`${ADVANCED_ROUTE}#smart-transactions`);
   }, [dispatch]);
 
   useEffect(() => {
@@ -210,7 +215,9 @@ export default function SmartTransactionsOptInModal({
           <EnableSmartTransactionsButton
             handleEnableButtonClick={handleEnableButtonClick}
           />
-          <NoThanksLink handleNoThanksLinkClick={handleNoThanksLinkClick} />
+          <ManageInSettingsLink
+            handleManageInSettingsLinkClick={handleManageInSettingsLinkClick}
+          />
         </Box>
       </ModalContent>
     </Modal>

ui/components/app/smart-transactions/smart-transactions-opt-in-modal.tsx

@@ -80,7 +80,7 @@ exports[`AdvancedTab Component should match snapshot 1`] = `
         >
           <span>
              
-            Turn on Smart Transactions for more reliable and secure transactions on ETH Mainnet. 
+            Turn on Smart Transactions for more reliable and secure transactions on Ethereum Mainnet. 
             <a
               class="mm-box mm-text mm-button-base mm-button-link mm-button-link--size-inherit mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
               href="https://support.metamask.io/transactions-and-gas/transactions/smart-transactions/"