From 4ab46da3ea474c80770c60ff9d1f77ab4215ea17 Mon Sep 17 00:00:00 2001 From: Mariano Perdomo Date: Tue, 5 Mar 2024 18:24:26 -0300 Subject: [PATCH] chore(refactor): sofi email refactor --- .../src/scenes/Login/Sofi/Email/index.tsx | 30 ++++++++++++------- .../scenes/Login/VerifyMagicLink/index.tsx | 5 ++-- .../src/scenes/Login/index.tsx | 4 +-- 3 files changed, 24 insertions(+), 15 deletions(-) diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Sofi/Email/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Sofi/Email/index.tsx index 2b5e4ac2866..445e8493c9c 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Sofi/Email/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Sofi/Email/index.tsx @@ -1,7 +1,8 @@ import React, { useEffect } from 'react' import { FormattedMessage } from 'react-intl' -import { useSelector } from 'react-redux' -import { Field } from 'redux-form' +import { useDispatch, useSelector } from 'react-redux' +import { push } from 'connected-react-router' +import { Field, formValueSelector, InjectedFormProps } from 'redux-form' import styled from 'styled-components' import { SofiMigrationStatusResponseType } from '@core/network/api/sofi/types' @@ -10,12 +11,12 @@ import FormGroup from 'components/Form/FormGroup' import FormItem from 'components/Form/FormItem' import TextBox from 'components/Form/TextBox' import { Wrapper } from 'components/Public' -import { RootState } from 'data/rootReducer' +import { LOGIN_FORM } from 'data/auth/model' +import { getSofiUserData } from 'data/modules/profile/selectors' import { required, validEmail } from 'services/forms' import { removeWhitespace } from 'services/forms/normalizers' import { media } from 'services/styles' -import { Props } from '../..' import { ActionButton, LinkRow, LoginFormLabel, SoFiWrapperWithPadding } from '../../model' const LoginWrapper = styled(Wrapper)` @@ -42,23 +43,32 @@ const HelperText = styled(Text)` color: ${(props) => props.theme.grey600}; ` -const Email = (props: Props) => { - const { busy, formValues, invalid, routerActions, submitting } = props +type Props = { + busy: boolean +} & Pick - const { sofiJwtPayload } = useSelector((state: RootState) => state.profile.sofiData).getOrElse( +const Email = ({ busy, invalid, submitting }: Props) => { + const dispatch = useDispatch() + const { sofiJwtPayload } = useSelector(getSofiUserData).getOrElse( {} ) as SofiMigrationStatusResponseType + const sofiLoginEmail = useSelector((state) => + formValueSelector(LOGIN_FORM)(state, 'sofiLoginEmail') + ) + + const onBack = () => dispatch(push('/sofi')) + useEffect(() => { if (!sofiJwtPayload) { - routerActions.push('/sofi-error') + dispatch(push('/sofi-error')) } }, []) return ( - routerActions.push('/sofi')}> + { nature='primary' fullwidth height='48px' - disabled={submitting || invalid || busy || !formValues?.sofiLoginEmail} + disabled={submitting || invalid || busy || !sofiLoginEmail} data-e2e='loginButton' style={{ marginBottom: '16px' }} > diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/index.tsx index 3fb64d26616..a898216e140 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/index.tsx @@ -3,18 +3,17 @@ import React from 'react' import { getAuthorizeVerifyDevice } from 'data/auth/selectors' import { useRemote } from 'hooks' -import { Props } from '..' import Error from './template.error' import Loading from './template.loading' import Success from './template.success' -const VerifyMagicLink = (props: Props) => { +const VerifyMagicLink = () => { const { data, error, isLoading, isNotAsked } = useRemote(getAuthorizeVerifyDevice) if (isLoading || isNotAsked) return if (error) return - return + return } export default VerifyMagicLink diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/index.tsx index 3ce23cd6692..d80f22e2dbc 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/index.tsx @@ -143,7 +143,7 @@ const Login = (props: Props) => { const getComponentByStep = () => { switch (step) { case LoginSteps.SOFI_EMAIL: - return + return case LoginSteps.INSTITUTIONAL_PORTAL: return case LoginSteps.ENTER_PASSWORD_EXCHANGE: @@ -179,7 +179,7 @@ const Login = (props: Props) => { case LoginSteps.CHECK_EMAIL: return case LoginSteps.VERIFY_MAGIC_LINK: - return + return case LoginSteps.SOFI_SUCCESS: return