fix issue where final onboarding pages are not show (#16943)

ui/pages/onboarding-flow/creation-successful/creation-successful.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
 
 import Box from '../../../components/ui/box';
 import Typography from '../../../components/ui/typography';
@@ -16,18 +15,12 @@ import {
   ONBOARDING_PIN_EXTENSION_ROUTE,
   ONBOARDING_PRIVACY_SETTINGS_ROUTE,
 } from '../../../helpers/constants/routes';
-import { setCompletedOnboarding } from '../../../store/actions';
 import { isBeta } from '../../../helpers/utils/build-types';
 
 export default function CreationSuccessful() {
   const history = useHistory();
   const t = useI18nContext();
-  const dispatch = useDispatch();
 
-  const onComplete = async () => {
-    await dispatch(setCompletedOnboarding());
-    history.push(ONBOARDING_PIN_EXTENSION_ROUTE);
-  };
   return (
     <div className="creation-successful" data-testid="creation-successful">
       <Box textAlign={TEXT_ALIGN.CENTER}>
@@ -100,7 +93,7 @@ export default function CreationSuccessful() {
           type="primary"
           large
           rounded
-          onClick={onComplete}
+          onClick={() => history.push(ONBOARDING_PIN_EXTENSION_ROUTE)}
         >
           {t('gotIt')}
         </Button>

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

@@ -33,13 +33,6 @@ describe('Creation Successful Onboarding View', () => {
       .mockReturnValue({ push: pushMock });
   });
 
-  it('should call completeOnboarding in the background when "Got it!" button is clicked', () => {
-    const { getByText } = renderWithProvider(<CreationSuccessful />, store);
-    const gotItButton = getByText('Got it!');
-    fireEvent.click(gotItButton);
-    expect(completeOnboardingStub).toHaveBeenCalledTimes(1);
-  });
-
   it('should redirect to privacy-settings view when "Advanced configuration" button is clicked', () => {
     const { getByText } = renderWithProvider(<CreationSuccessful />, store);
     const privacySettingsButton = getByText('Advanced configuration');

ui/pages/onboarding-flow/pin-extension/pin-extension.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-
+import { useDispatch } from 'react-redux';
 import { Carousel } from 'react-responsive-carousel';
 import Typography from '../../../components/ui/typography/typography';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -11,12 +11,23 @@ import {
   TEXT_ALIGN,
 } from '../../../helpers/constants/design-system';
 import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
+import { setCompletedOnboarding } from '../../../store/actions';
 import OnboardingPinBillboard from './pin-billboard';
 
 export default function OnboardingPinExtension() {
   const t = useI18nContext();
   const [selectedIndex, setSelectedIndex] = useState(0);
   const history = useHistory();
+  const dispatch = useDispatch();
+
+  const handleClick = async () => {
+    if (selectedIndex === 0) {
+      setSelectedIndex(1);
+    } else {
+      await dispatch(setCompletedOnboarding());
+      history.push(DEFAULT_ROUTE);
+    }
+  };
 
   return (
     <div
@@ -66,13 +77,7 @@ export default function OnboardingPinExtension() {
             selectedIndex === 0 ? 'pin-extension-next' : 'pin-extension-done'
           }
           type="primary"
-          onClick={() => {
+          onClick={handleClick}
-            if (selectedIndex === 0) {
-              setSelectedIndex(1);
-            } else {
-              history.push(DEFAULT_ROUTE);
-            }
-          }}
         >
           {selectedIndex === 0 ? t('next') : t('done')}
         </Button>

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import reactRouterDom from 'react-router-dom';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import {
+  renderWithProvider,
+  setBackgroundConnection,
+} from '../../../../test/jest';
+import PinExtension from './pin-extension';
+
+const completeOnboardingStub = jest
+  .fn()
+  .mockImplementation(() => Promise.resolve());
+
+describe('Creation Successful Onboarding View', () => {
+  const mockStore = {
+    metamask: {
+      provider: {
+        type: 'test',
+      },
+    },
+  };
+  const store = configureMockStore([thunk])(mockStore);
+  setBackgroundConnection({ completeOnboarding: completeOnboardingStub });
+
+  const pushMock = jest.fn();
+  beforeAll(() => {
+    jest
+      .spyOn(reactRouterDom, 'useHistory')
+      .mockImplementation()
+      .mockReturnValue({ push: pushMock });
+  });
+
+  it('should call completeOnboarding in the background when Done" button is clicked', () => {
+    const { getByText } = renderWithProvider(<PinExtension />, store);
+    const nextButton = getByText('Next');
+    fireEvent.click(nextButton);
+    const gotItButton = getByText('Done');
+    fireEvent.click(gotItButton);
+    expect(completeOnboardingStub).toHaveBeenCalledTimes(1);
+  });
+});