chore(refactor): refactor exchane login pages (#6177)

blockchain · Dec 14, 2023 · 0cf45dd · 0cf45dd
1 parent 5b84609
commit 0cf45dd
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 41 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/EnterEmail/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/EnterEmail/index.tsx
@@ -26,16 +26,7 @@ const LoginWrapper = styled(Wrapper)`
 `
 
 const EnterEmail = (props: Props) => {
-  const {
-    busy,
-    cache,
-    formValues,
-    invalid,
-    magicLinkData,
-    productAuthMetadata,
-    submitting,
-    walletTabClicked
-  } = props
+  const { busy, formValues, invalid, magicLinkData, submitting, walletTabClicked } = props
 
   return (
     <LoginWrapper>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/EnterPassword/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/EnterPassword/index.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
+import { useDispatch } from 'react-redux'
 import { Field } from 'redux-form'
 import styled from 'styled-components'
 
@@ -10,6 +11,7 @@ import FormItem from 'components/Form/FormItem'
 import FormLabel from 'components/Form/FormLabel'
 import PasswordBox from 'components/Form/PasswordBox'
 import { Wrapper } from 'components/Public'
+import { trackEvent } from 'data/analytics/slice'
 import { Analytics, ExchangeErrorCodes, ProductAuthOptions } from 'data/types'
 import { required } from 'services/forms'
 import { media } from 'services/styles'
@@ -30,7 +32,6 @@ const LoginWrapper = styled(Wrapper)`
 
 const EnterPasswordExchange = (props: Props) => {
   const {
-    analyticsActions,
     cache,
     exchangeError,
     formValues,
@@ -42,18 +43,22 @@ const EnterPasswordExchange = (props: Props) => {
     walletTabClicked
   } = props
 
+  const dispatch = useDispatch()
+
   useEffect(() => {
-    analyticsActions.trackEvent({
-      key: Analytics.LOGIN_PASSWORD_INPUT_PAGE_ENTERED,
-      properties: {
-        device_origin: productAuthMetadata?.product || 'WEB',
-        originalTimestamp: new Date().toISOString()
-      }
-    })
+    dispatch(
+      trackEvent({
+        key: Analytics.LOGIN_PASSWORD_INPUT_PAGE_ENTERED,
+        properties: {
+          device_origin: productAuthMetadata?.product || 'WEB',
+          originalTimestamp: new Date().toISOString()
+        }
+      })
+    )
   }, [])
 
-  const passwordError = exchangeError && exchangeError === ExchangeErrorCodes.INVALID_CREDENTIALS
-  const sanctionedRegionError = exchangeError && exchangeError === ExchangeErrorCodes.NOT_ACCEPTABLE
+  const passwordError = exchangeError === ExchangeErrorCodes.INVALID_CREDENTIALS
+  const sanctionedRegionError = exchangeError === ExchangeErrorCodes.NOT_ACCEPTABLE
 
   return (
     <LoginWrapper>
@@ -65,7 +70,7 @@ const EnterPasswordExchange = (props: Props) => {
       />
       <WrapperWithPadding>
         <BackArrowHeader
-          {...props}
+          formValues={formValues}
           handleBackArrowClick={handleBackArrowClickExchange}
           hideGuid
           marginTop='28px'

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/Institutional/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/Institutional/index.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
-import { Field } from 'redux-form'
+import { push } from 'connected-react-router'
+import { clearFields, Field } from 'redux-form'
 import styled from 'styled-components'
 
 import { HeartbeatLoader, Icon, Text } from 'blockchain-info-components'
@@ -41,10 +42,6 @@ const BackArrow = styled.div`
 `
 
 const InstitutionalPortal = (props: Props) => {
-  useEffect(() => {
-    props.formActions.clearFields(LOGIN_FORM, false, false, 'exchangeEmail')
-  }, [])
-
   const {
     busy,
     exchangeError,
@@ -53,14 +50,18 @@ const InstitutionalPortal = (props: Props) => {
     invalid,
     magicLinkData,
     productAuthMetadata,
-    routerActions,
     submitting
   } = props
-  const passwordError = exchangeError && exchangeError === ExchangeErrorCodes.INVALID_CREDENTIALS
+
+  const passwordError = exchangeError === ExchangeErrorCodes.INVALID_CREDENTIALS
+
   const backArrowClick = () => {
     handleBackArrowClickExchange()
-    routerActions.push('/login?product=exchange')
+    push('/login?product=exchange')
   }
+  useEffect(() => {
+    clearFields(LOGIN_FORM, false, false, 'exchangeEmail')
+  }, [])
   return (
     <LoginWrapper>
       <WrapperWithPadding>
@@ -113,7 +114,7 @@ const InstitutionalPortal = (props: Props) => {
                   id='scenes.login.exchange.wrong_password'
                   defaultMessage='Login failed - wrong password.'
                 />
-                {/* some sort of prompts to reset password?  */}
+                {/* some sort of prompts to reset password? */}
               </FormError>
             )}
           </FormItem>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/TwoFA/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/Exchange/TwoFA/index.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
+import { useDispatch } from 'react-redux'
 import { Field } from 'redux-form'
 import styled from 'styled-components'
 
@@ -10,6 +11,7 @@ import FormItem from 'components/Form/FormItem'
 import FormLabel from 'components/Form/FormLabel'
 import TextBox from 'components/Form/TextBox'
 import { Wrapper } from 'components/Public'
+import { trackEvent } from 'data/analytics/slice'
 import { ProductAuthOptions } from 'data/auth/types'
 import { Analytics, ExchangeErrorCodes } from 'data/types'
 import { required } from 'services/forms'
@@ -31,7 +33,6 @@ const LoginWrapper = styled(Wrapper)`
 `
 const TwoFAExchange = (props: Props) => {
   const {
-    analyticsActions,
     authType,
     busy,
     cache,
@@ -43,25 +44,29 @@ const TwoFAExchange = (props: Props) => {
     productAuthMetadata,
     submitting
   } = props
-  const twoFactorError = exchangeError && exchangeError === ExchangeErrorCodes.WRONG_2FA
+  const twoFactorError = exchangeError === ExchangeErrorCodes.WRONG_2FA
+
+  const dispatch = useDispatch()
 
   useEffect(() => {
     const twoFAType = getTwoFaType(authType)
-    analyticsActions.trackEvent({
-      key: Analytics.LOGIN_2FA_PAGE_VIEWED,
-      properties: {
-        '2fa_type': twoFAType,
-        device_origin: productAuthMetadata?.product || 'WEB',
-        originalTimestamp: new Date().toISOString()
-      }
-    })
+    dispatch(
+      trackEvent({
+        key: Analytics.LOGIN_2FA_PAGE_VIEWED,
+        properties: {
+          '2fa_type': twoFAType,
+          device_origin: productAuthMetadata?.product || 'WEB',
+          originalTimestamp: new Date().toISOString()
+        }
+      })
+    )
   }, [])
 
   return (
     <LoginWrapper>
       <WrapperWithPadding>
         <BackArrowHeader
-          {...props}
+          formValues={formValues}
           handleBackArrowClick={handleBackArrowClickExchange}
           hideGuid
           platform={magicLinkData?.platform_type}