Onboarding: Set SeedPhraseBackedUp when appropriate (#16875)

* Onboarding: Set SeedPhraseBackedUp when appropriate

* Dispatch setSeedPhraseBackedUp

* Fix test

* Make call async

* Fix test

* Fix test

* enhance test

Co-authored-by: Alex <adonesky@gmail.com>

ui/pages/onboarding-flow/recovery-phrase/confirm-recovery-phrase.js

@@ -1,5 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import { debounce } from 'lodash';
 import PropTypes from 'prop-types';
 import Box from '../../../components/ui/box';
@@ -17,11 +18,13 @@ import {
 } from '../../../components/app/step-progress-bar';
 import { ONBOARDING_COMPLETION_ROUTE } from '../../../helpers/constants/routes';
 import { useI18nContext } from '../../../hooks/useI18nContext';
+import { setSeedPhraseBackedUp } from '../../../store/actions';
 import RecoveryPhraseChips from './recovery-phrase-chips';
 
 export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) {
   const history = useHistory();
   const t = useI18nContext();
+  const dispatch = useDispatch();
   const splitSecretRecoveryPhrase = secretRecoveryPhrase.split(' ');
   const indicesToCheck = [2, 3, 7];
   const [matching, setMatching] = useState(false);
@@ -93,7 +96,8 @@ export default function ConfirmRecoveryPhrase({ secretRecoveryPhrase = '' }) {
           type="primary"
           large
           className="recovery-phrase__footer__confirm--button"
-          onClick={() => {
+          onClick={async () => {
+            await dispatch(setSeedPhraseBackedUp(true));
             history.push(ONBOARDING_COMPLETION_ROUTE);
           }}
           disabled={!matching}

ui/pages/onboarding-flow/secure-your-wallet/secure-your-wallet.test.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
 import reactRouterDom from 'react-router-dom';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import { ONBOARDING_COMPLETION_ROUTE } from '../../../helpers/constants/routes';
+import * as Actions from '../../../store/actions';
 import SecureYourWallet from './secure-your-wallet';
 
 describe('Secure Your Wallet Onboarding View', () => {
@@ -28,7 +30,8 @@ describe('Secure Your Wallet Onboarding View', () => {
     },
   };
 
-  const store = configureMockStore()(mockStore);
+  const store = configureMockStore([thunk])(mockStore);
+
   it('should show a popover asking the user if they want to skip account security if they click "Remind me later"', () => {
     const { queryAllByText, getByText } = renderWithProvider(
       <SecureYourWallet />,
@@ -40,7 +43,11 @@ describe('Secure Your Wallet Onboarding View', () => {
     expect(queryAllByText('Skip account security?')).toHaveLength(1);
   });
 
-  it('should not be able to click "skip" until "Skip Account Security" terms are agreed to', () => {
+  it('should not be able to click "skip" until "Skip Account Security" terms are agreed to', async () => {
+    const setSeedPhraseBackedUpSpy = jest
+      .spyOn(Actions, 'setSeedPhraseBackedUp')
+      .mockReturnValue({ type: 'setSeedPhraseBackedUp' });
+
     const { getByText, getByTestId } = renderWithProvider(
       <SecureYourWallet />,
       store,
@@ -52,7 +59,9 @@ describe('Secure Your Wallet Onboarding View', () => {
     expect(pushMock).toHaveBeenCalledTimes(0);
     const checkbox = getByTestId('skip-srp-backup-popover-checkbox');
     fireEvent.click(checkbox);
-    fireEvent.click(skipButton);
+    const confirmSkip = getByTestId('skip-srp-backup');
+    await fireEvent.click(confirmSkip);
+    expect(setSeedPhraseBackedUpSpy).toHaveBeenCalledTimes(1);
     expect(pushMock).toHaveBeenCalledTimes(1);
     expect(pushMock).toHaveBeenCalledWith(ONBOARDING_COMPLETION_ROUTE);
   });

ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import Button from '../../../components/ui/button';
 import Popover from '../../../components/ui/popover';
@@ -13,6 +14,7 @@ import {
   JUSTIFY_CONTENT,
   TYPOGRAPHY,
 } from '../../../helpers/constants/design-system';
+import { setSeedPhraseBackedUp } from '../../../store/actions';
 import Checkbox from '../../../components/ui/check-box';
 import { ONBOARDING_COMPLETION_ROUTE } from '../../../helpers/constants/routes';
 
@@ -20,6 +22,8 @@ export default function SkipSRPBackup({ handleClose }) {
   const [checked, setChecked] = useState(false);
   const t = useI18nContext();
   const history = useHistory();
+  const dispatch = useDispatch();
+
   return (
     <Popover
       className="skip-srp-backup-popover"
@@ -37,7 +41,10 @@ export default function SkipSRPBackup({ handleClose }) {
             disabled={!checked}
             type="primary"
             rounded
-            onClick={() => history.push(ONBOARDING_COMPLETION_ROUTE)}
+            onClick={async () => {
+              await dispatch(setSeedPhraseBackedUp(false));
+              history.push(ONBOARDING_COMPLETION_ROUTE);
+            }}
           >
             {t('skip')}
           </Button>