Fixed issues in onboarding flow (#13826)

ui/components/app/step-progress-bar/index.scss

@@ -17,7 +17,6 @@ ul.two-steps {
   font-size: 12px;
   position: relative;
   text-align: center;
-  text-transform: uppercase;
   color: #7d7d7d;
   z-index: 2;
 }
@@ -84,7 +83,7 @@ ul.two-steps {
   }
 }
 
-.progressbar li.active + li::after {
+.progressbar li.complete + li::after {
   background-color: var(--primary-blue);
   z-index: -1;
 

ui/components/app/step-progress-bar/step-progress-bar.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
+import { capitalize } from 'lodash';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import Box from '../../ui/box';
 import { BLOCK_SIZES } from '../../../helpers/constants/design-system';
@@ -26,26 +27,26 @@ export function ThreeStepProgressBar({ stage }) {
         <li
           className={classnames({
             active: stage >= 1,
-            complete: stage >= 1,
+            complete: stage > 1,
           })}
         >
-          {t('createPassword')}
+          {capitalize(t('createPassword'))}
         </li>
         <li
           className={classnames({
             active: stage >= 2,
-            complete: stage >= 3,
+            complete: stage > 3,
           })}
         >
-          {t('secureWallet')}
+          {capitalize(t('secureWallet'))}
         </li>
         <li
           className={classnames({
             active: stage >= 4,
-            complete: stage >= 5,
+            complete: stage > 5,
           })}
         >
-          {t('confirmRecoveryPhrase')}
+          {capitalize(t('confirmRecoveryPhrase'))}
         </li>
       </ul>
     </Box>
@@ -63,7 +64,7 @@ export function TwoStepProgressBar({ stage }) {
             complete: stage > 1,
           })}
         >
-          {t('confirmRecoveryPhrase')}
+          {capitalize(t('confirmRecoveryPhrase'))}
         </li>
         <li
           className={classnames('two-steps', {
@@ -71,7 +72,7 @@ export function TwoStepProgressBar({ stage }) {
             complete: stage > 2,
           })}
         >
-          {t('createPassword')}
+          {capitalize(t('createPassword'))}
         </li>
       </ul>
     </Box>

ui/helpers/constants/onboarding.js

@@ -0,0 +1,6 @@
+const FIRST_TIME_FLOW_TYPES = {
+  IMPORT: 'import',
+  CREATE: 'create',
+};
+
+export { FIRST_TIME_FLOW_TYPES };

ui/pages/onboarding-flow/create-password/create-password.js

@@ -2,6 +2,7 @@ import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 import zxcvbn from 'zxcvbn';
+import { useSelector } from 'react-redux';
 import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import Button from '../../../components/ui/button';
@@ -27,6 +28,8 @@ import {
   twoStepStages,
 } from '../../../components/app/step-progress-bar';
 import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
+import { getFirstTimeFlowType } from '../../../selectors';
+import { FIRST_TIME_FLOW_TYPES } from '../../../helpers/constants/onboarding';
 
 export default function CreatePassword({
   createNewAccount,
@@ -43,6 +46,7 @@ export default function CreatePassword({
   const [termsChecked, setTermsChecked] = useState(false);
   const [showPassword, setShowPassword] = useState(false);
   const history = useHistory();
+  const firstTimeFlowType = useSelector(getFirstTimeFlowType);
 
   const submitPasswordEvent = useNewMetricEvent({
     event: 'Submit Password',
@@ -126,7 +130,10 @@ export default function CreatePassword({
       return;
     }
     // If secretRecoveryPhrase is defined we are in import wallet flow
-    if (secretRecoveryPhrase) {
+    if (
+      secretRecoveryPhrase &&
+      firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT
+    ) {
       await importWithRecoveryPhrase(password, secretRecoveryPhrase);
       history.push(ONBOARDING_COMPLETION_ROUTE);
     } else {
@@ -145,7 +152,8 @@ export default function CreatePassword({
 
   return (
     <div className="create-password__wrapper">
-      {secretRecoveryPhrase ? (
+      {secretRecoveryPhrase &&
+      firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT ? (
         <TwoStepProgressBar stage={twoStepStages.PASSWORD_CREATE} />
       ) : (
         <ThreeStepProgressBar stage={threeStepStages.PASSWORD_CREATE} />
@@ -231,7 +239,8 @@ export default function CreatePassword({
           </Box>
           <Button
             data-testid={
-              secretRecoveryPhrase
+              secretRecoveryPhrase &&
+              firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT
                 ? 'create-password-import'
                 : 'create-password-wallet'
             }
@@ -240,7 +249,10 @@ export default function CreatePassword({
             disabled={!isValid || !termsChecked}
             onClick={handleCreate}
           >
-            {secretRecoveryPhrase ? t('importMyWallet') : t('createNewWallet')}
+            {secretRecoveryPhrase &&
+            firstTimeFlowType === FIRST_TIME_FLOW_TYPES.IMPORT
+              ? t('importMyWallet')
+              : t('createNewWallet')}
           </Button>
         </form>
       </Box>