fix(recovery-redirect): add state to know which step to set on form

blockchain · May 18, 2022 · 20ea753 · 20ea753
1 parent be802db
commit 20ea753
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Wallet/EnterEmailOrGuid/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Wallet/EnterEmailOrGuid/index.tsx
@@ -9,12 +9,11 @@ import FormGroup from 'components/Form/FormGroup'
 import FormItem from 'components/Form/FormItem'
 import TextBox from 'components/Form/TextBox'
 import { Wrapper } from 'components/Public'
-import { ProductAuthOptions, RecoverSteps } from 'data/types'
+import { ProductAuthOptions } from 'data/types'
 import { required, validWalletIdOrEmail } from 'services/forms'
 import { removeWhitespace } from 'services/forms/normalizers'
 import { media } from 'services/styles'
 
-import { RECOVER_FORM } from '../../../RecoverWallet/model'
 import { Props } from '../..'
 import ProductTabMenu from '../../components/ProductTabMenu'
 import SignupLink from '../../components/SignupLink'
@@ -30,16 +29,8 @@ const LoginWrapper = styled(Wrapper)`
 `
 
 const EnterEmailOrGuid = (props: Props) => {
-  const {
-    busy,
-    exchangeTabClicked,
-    formValues,
-    invalid,
-    magicLinkData,
-    productAuthMetadata,
-    submitting,
-    walletError
-  } = props
+  const { busy, exchangeTabClicked, formValues, invalid, magicLinkData, submitting, walletError } =
+    props
   const guidError = walletError && walletError.toLowerCase().includes('unknown wallet id')
 
   return (
@@ -91,8 +82,8 @@ const EnterEmailOrGuid = (props: Props) => {
               </Text>
             )}
           </ActionButton>
-          <LinkContainer to='/recover'>
-            <Link size='13px' weight={600} data-e2e='loginGetHelp'>
+          <LinkContainer to={{ pathname: '/recover', state: { showPhraseStep: true } }}>
+            <Link size='13px' weight={600} data-e2e='loginImportAccount'>
               <FormattedMessage
                 id='scenes.login.import_your_account'
                 defaultMessage='Import Your Account'

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/RecoverWallet/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/RecoverWallet/index.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { connect, ConnectedProps } from 'react-redux'
+import { pathOr } from 'ramda'
 import { bindActionCreators, compose } from 'redux'
 import { getFormMeta, InjectedFormProps, reduxForm } from 'redux-form'
 
@@ -14,9 +15,23 @@ import RecoveryOptions from './RecoveryOptions'
 import RecoveryPhrase from './RecoveryPhrase'
 import ResetAccount from './ResetAccount'
 
-class RecoverWalletContainer extends React.PureComponent<InjectedFormProps<{}, Props> & Props> {
+class RecoverWalletContainer extends React.PureComponent<
+  InjectedFormProps<{}, Props> & Props,
+  State
+> {
+  constructor(props) {
+    super(props)
+    this.state = {
+      showPhraseStep: pathOr(false, ['location', 'state', 'showPhraseStep'], this.props)
+    }
+  }
+
   componentDidMount() {
-    this.props.formActions.change(RECOVER_FORM, 'step', RecoverSteps.RECOVERY_OPTIONS)
+    if (this.state.showPhraseStep) {
+      this.props.formActions.change(RECOVER_FORM, 'step', RecoverSteps.RECOVERY_PHRASE)
+    } else {
+      this.props.formActions.change(RECOVER_FORM, 'step', RecoverSteps.RECOVERY_OPTIONS)
+    }
   }
 
   componentWillUnmount() {
@@ -29,6 +44,7 @@ class RecoverWalletContainer extends React.PureComponent<InjectedFormProps<{}, P
 
   render() {
     const { step } = this.props.formValues || RecoverSteps.RECOVERY_OPTIONS
+
     return (
       <Form>
         {(() => {
@@ -82,6 +98,7 @@ type FormProps = {
   submitting: boolean
 }
 
+type State = { showPhraseStep: boolean }
 export type Props = ConnectedProps<typeof connector> & FormProps
 
 const connector = connect(mapStateToProps, mapDispatchToProps)