chore(login): collocate states

Author: mperdomo-bc

packages/blockchain-wallet-v4-frontend/src/data/auth/selectors.ts

@@ -46,7 +46,7 @@ export function getMobileLoginStarted(state: RootState): AuthStateType['mobileLo
   return state.auth.mobileLoginStarted
 }
 
-export function getMagicLinkData(state: RootState): AuthStateType['magicLinkData'] {
+export function getMagicLinkData(state: RootState) {
   return state.auth.magicLinkData
 }
 

packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/EnterEmail/index.tsx

@@ -26,14 +26,14 @@ const LoginWrapper = styled(Wrapper)`
 `
 
 const EnterEmail = (props: Props) => {
-  const { busy, formValues, invalid, magicLinkData, submitting, walletTabClicked } = props
+  const { busy, formValues, invalid, isMobilePlatform, submitting, walletTabClicked } = props
 
   return (
     <LoginWrapper>
       <ProductTabMenu
         active={ProductAuthOptions.EXCHANGE}
         onWalletTabClick={walletTabClicked}
-        platform={magicLinkData?.platform_type}
+        isMobilePlatform={isMobilePlatform}
         product={ProductAuthOptions.EXCHANGE}
       />
       <WrapperWithPadding>
@@ -74,7 +74,7 @@ const EnterEmail = (props: Props) => {
           </ActionButton>
         </LinkRow>
       </WrapperWithPadding>
-      <SignupLink platform={magicLinkData?.platform_type} />
+      {isMobilePlatform && <SignupLink />}
     </LoginWrapper>
   )
 }

packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/EnterPassword/index.tsx

@@ -32,12 +32,11 @@ const LoginWrapper = styled(Wrapper)`
 
 const EnterPasswordExchange = (props: Props) => {
   const {
-    cache,
     exchangeError,
     formValues,
     handleBackArrowClickExchange,
     invalid,
-    magicLinkData,
+    isMobilePlatform,
     productAuthMetadata,
     submitting,
     walletTabClicked
@@ -65,7 +64,7 @@ const EnterPasswordExchange = (props: Props) => {
       <ProductTabMenu
         active={ProductAuthOptions.EXCHANGE}
         onWalletTabClick={walletTabClicked}
-        platform={magicLinkData?.platform_type}
+        isMobilePlatform={isMobilePlatform}
         product={ProductAuthOptions.EXCHANGE}
       />
       <WrapperWithPadding>
@@ -74,7 +73,7 @@ const EnterPasswordExchange = (props: Props) => {
           handleBackArrowClick={handleBackArrowClickExchange}
           hideGuid
           marginTop='28px'
-          platform={magicLinkData?.platform_type}
+          hideBackArrow={isMobilePlatform}
           product={ProductAuthOptions.EXCHANGE}
         />
         <FormGroup>
@@ -131,11 +130,10 @@ const EnterPasswordExchange = (props: Props) => {
             origin='PASSWORD'
             platform={productAuthMetadata.platform}
             product={ProductAuthOptions.EXCHANGE}
-            unified={cache.unifiedAccount}
           />
         </CenteredColumn>
       </WrapperWithPadding>
-      <SignupLink platform={magicLinkData?.platform_type} />
+      {isMobilePlatform && <SignupLink />}
     </LoginWrapper>
   )
 }

packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/Institutional/index.tsx

@@ -48,7 +48,7 @@ const InstitutionalPortal = (props: Props) => {
     formValues,
     handleBackArrowClickExchange,
     invalid,
-    magicLinkData,
+    isMobilePlatform,
     productAuthMetadata,
     submitting
   } = props
@@ -144,7 +144,7 @@ const InstitutionalPortal = (props: Props) => {
           />
         </LinkRow>
       </WrapperWithPadding>
-      <SignupLink platform={magicLinkData?.platform_type} />
+      {isMobilePlatform && <SignupLink />}
     </LoginWrapper>
   )
 }

packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/TwoFA/index.tsx

@@ -35,12 +35,11 @@ const LoginWrapper = styled(Wrapper)`
 const TwoFAExchange = (props: Props) => {
   const {
     busy,
-    cache,
     exchangeError,
     formValues,
     handleBackArrowClickExchange,
     invalid,
-    magicLinkData,
+    isMobilePlatform,
     productAuthMetadata,
     submitting
   } = props
@@ -71,7 +70,7 @@ const TwoFAExchange = (props: Props) => {
           formValues={formValues}
           handleBackArrowClick={handleBackArrowClickExchange}
           hideGuid
-          platform={magicLinkData?.platform_type}
+          hideBackArrow={isMobilePlatform}
         />
         <FormGroup>
           <FormItem>
@@ -129,11 +128,10 @@ const TwoFAExchange = (props: Props) => {
             origin='2FA'
             platform={productAuthMetadata.platform}
             product={ProductAuthOptions.EXCHANGE}
-            unified={cache.unifiedAccount}
           />
         </LinkRow>
       </WrapperWithPadding>
-      <SignupLink platform={magicLinkData?.platform_type} />
+      {isMobilePlatform && <SignupLink />}
     </LoginWrapper>
   )
 }

packages/blockchain-wallet-v4-frontend/src/scenes/Login/Sofi/ContinueOnMobile/index.tsx

@@ -1,16 +1,14 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
-import { useDispatch } from 'react-redux'
 import styled from 'styled-components'
 
 import { Badge, Button, Image, Text } from 'blockchain-info-components'
 import { Wrapper } from 'components/Public'
-import { actions } from 'data'
-import { isBrowserAndroid, isBrowserIOS } from 'services/browser'
 import { isMobile, media } from 'services/styles'
 
-import { Props } from '../..'
 import { CircleBackground } from '../../model'
+import { useDispatch } from 'react-redux'
+import { push } from 'connected-react-router'
 
 const ContentWrapper = styled.div`
   display: flex;
@@ -37,12 +35,12 @@ const AppButtons = styled.footer`
   `};
 `
 
-const ContinueOnMobile = (props: Props) => {
+const ContinueOnMobile = () => {
   const dispatch = useDispatch()
   // Add check here to make sure that there is wallet data
   // route should navigate to login if there's no wallet data
   const sofiWalletRedirect = () => {
-    dispatch(actions.router.push('/home'))
+    dispatch(push('/home'))
   }
 
   const APP_URL = 'https://blockchainwallet.page.link/dashboard'

packages/blockchain-wallet-v4-frontend/src/scenes/Login/Sofi/Email/index.tsx

@@ -17,6 +17,7 @@ import { media } from 'services/styles'
 
 import { Props } from '../..'
 import { ActionButton, LinkRow, LoginFormLabel, SoFiWrapperWithPadding } from '../../model'
+import { push } from 'connected-react-router'
 
 const LoginWrapper = styled(Wrapper)`
   display: flex;
@@ -43,22 +44,22 @@ const HelperText = styled(Text)`
 `
 
 const Email = (props: Props) => {
-  const { busy, formValues, invalid, routerActions, submitting } = props
+  const { busy, formValues, invalid, submitting } = props
 
   const { sofiJwtPayload } = useSelector((state: RootState) => state.profile.sofiData).getOrElse(
     {}
   ) as SofiMigrationStatusResponseType
 
   useEffect(() => {
     if (!sofiJwtPayload) {
-      routerActions.push('/sofi-error')
+      push('/sofi-error')
     }
   }, [])
 
   return (
     <LoginWrapper>
       <SoFiWrapperWithPadding>
-        <BackArrow onClick={() => routerActions.push('/sofi')}>
+        <BackArrow onClick={() => push('/sofi')}>
           <Icon
             data-e2e='signupBack'
             name='arrow-back'

packages/blockchain-wallet-v4-frontend/src/scenes/Login/Sofi/Success/index.tsx

@@ -9,16 +9,14 @@ import { actions } from 'data'
 import { isBrowserAndroid, isBrowserIOS } from 'services/browser'
 import { isMobile } from 'services/styles'
 
-import { Props } from '../..'
-
 const ContentWrapper = styled.div`
   display: flex;
   text-align: center;
   align-items: center;
   flex-direction: column;
 `
 
-const SofiSuccess = (props: Props) => {
+const SofiSuccess = () => {
   const dispatch = useDispatch()
   // Add check here to make sure that there is wallet data
   // route should navigate to login if there's no wallet data

packages/blockchain-wallet-v4-frontend/src/scenes/Login/Sofi/VerifySSN/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import { useDispatch } from 'react-redux'
 import { Field } from 'redux-form'
@@ -11,17 +11,10 @@ import TextBox from 'components/Form/TextBox'
 import { Wrapper } from 'components/Public'
 import { actions } from 'data'
 import { Analytics } from 'data/types'
-import { removeWhitespace } from 'services/forms/normalizers'
 import { media } from 'services/styles'
 
 import { Props } from '../..'
-import {
-  ActionButton,
-  GuidError,
-  LinkRow,
-  LoginFormLabel,
-  SoFiWrapperWithPadding
-} from '../../model'
+import { ActionButton, LinkRow, LoginFormLabel, SoFiWrapperWithPadding } from '../../model'
 
 const LoginWrapper = styled(Wrapper)`
   display: flex;
@@ -38,7 +31,7 @@ const FormBody = styled.div`
 `
 
 const SofiVerifyID = (props: Props) => {
-  const { busy, formActions, formValues, invalid, submitting } = props
+  const { busy, formValues, invalid, submitting } = props
 
   const dispatch = useDispatch()
 

packages/blockchain-wallet-v4-frontend/src/scenes/Login/VerifyMagicLink/template.success.tsx

@@ -1,20 +1,14 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
+import { useDispatch } from 'react-redux'
 import styled from 'styled-components'
 
 import { Banner, Button, Icon, Image, Text } from 'blockchain-info-components'
-import { Wrapper } from 'components/Public'
+import { actions } from 'data'
 import { media } from 'services/styles'
 
-import { Props } from '..'
 import { LoginWrapper } from '../model'
 
-const InfoWrapper = styled.div`
-  width: 100%;
-  text-align: left;
-  ${media.mobile`
-  text-align: center;`}
-`
 const DeviceInfoWrapper = styled.div`
   margin-top: 20px;
 `
@@ -86,25 +80,28 @@ const SuccessWrapper = styled.div`
   flex-direction: column;
 `
 
-const Success = (props) => {
-  const { approver, requester } = props
-  return props.deviceAuthorized ? (
-    <LoginWrapper>
-      <SuccessWrapper>
-        <Icon color='success' name='checkmark-circle-filled' size='40px' />
-        <Text size='20px' weight={600} color='black' style={{ marginTop: '8px' }}>
-          <FormattedMessage id='scenes.login.device_verified' defaultMessage='Device verified!' />
-        </Text>
+const Success = ({ approver, deviceAuthorized, requester }) => {
+  const dispatch = useDispatch()
+  const authorizeDevice = (state: boolean) => dispatch(actions.auth.authorizeVerifyDevice(state))
 
-        <Text color='grey900' style={{ marginTop: '8px' }} size='16px' weight={500}>
-          <FormattedMessage
-            id='scenes.login.device_verified.copy'
-            defaultMessage='You can safely close this tab or page. Go back to the other Blockchain.com tab or page to continue.'
-          />
-        </Text>
-      </SuccessWrapper>
-    </LoginWrapper>
-  ) : (
+  if (deviceAuthorized) {
+    return (
+      <LoginWrapper>
+        <SuccessWrapper>
+          <Icon color='success' name='checkmark-circle-filled' size='40px' />
+
+          <Text color='grey900' style={{ marginTop: '8px' }} size='16px' weight={500}>
+            <FormattedMessage
+              id='scenes.login.device_verified.copy'
+              defaultMessage='You can safely close this tab or page. Go back to the other Blockchain.com tab or page to continue.'
+            />
+          </Text>
+        </SuccessWrapper>
+      </LoginWrapper>
+    )
+  }
+
+  return (
     <LoginWrapper>
       <FormBody>
         <Image name='blockchain-icon' width='40px' height='40px' />
@@ -232,7 +229,7 @@ const Success = (props) => {
         <ApproveRejectButtons
           data-e2e='approveLogin'
           nature='warning'
-          onClick={() => props.authActions.authorizeVerifyDevice(true)}
+          onClick={() => authorizeDevice(true)}
         >
           <FormattedMessage id='modals.mobilenumberverify.verify' defaultMessage='Verify' />
         </ApproveRejectButtons>
@@ -242,7 +239,7 @@ const Success = (props) => {
         <ApproveRejectButtons
           data-e2e='rejectLogin'
           nature='primary'
-          onClick={() => props.authActions.authorizeVerifyDevice(false)}
+          onClick={() => authorizeDevice(false)}
         >
           <FormattedMessage id='scenes.authorizelogin.reject' defaultMessage='Reject' />
         </ApproveRejectButtons>