From bcf37d6cb9503b90e4653cc3cdd021bcb43fd081 Mon Sep 17 00:00:00 2001
From: Mariano Perdomo <mperdomo@blockchain.com>
Date: Wed, 25 Oct 2023 18:41:56 -0300
Subject: [PATCH] chore(refactor): refactor login components folder

---
 .../components/BackArrowHeader/index.tsx      | 110 +++++++++---------
 .../components/LoginSceneFooter/index.tsx     |  40 -------
 .../Login/components/NeedHelpLink/index.tsx   |  43 ++++---
 .../Login/components/SignupLink/index.tsx     |   8 +-
 4 files changed, 83 insertions(+), 118 deletions(-)
 delete mode 100644 packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/LoginSceneFooter/index.tsx

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/BackArrowHeader/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/BackArrowHeader/index.tsx
index 91cec402b2e..564b0deeff3 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/BackArrowHeader/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/BackArrowHeader/index.tsx
@@ -11,7 +11,7 @@ const BackArrowWrapper = styled.div<{ hideBackArrow?: boolean; marginTop?: strin
   justify-content: ${(props) => (props.hideBackArrow ? 'flex-end' : 'space-between')};
   margin-bottom: 24px;
   align-items: center;
-  margin-top: ${(props) => (props.marginTop ? props.marginTop : 'auto')};
+  margin-top: ${(props) => props.marginTop || 'auto'};
 `
 const BackArrow = styled.div`
   display: flex;
@@ -24,70 +24,76 @@ const EmailAndGuid = styled.div`
   align-items: center;
 `
 
-const BackArrowHeader = (props: {
+type Props = {
   formValues: LoginFormType
   handleBackArrowClick: () => void
   hideGuid?: boolean
   marginTop?: string
   platform?: PlatformTypes
   product?: ProductAuthOptions
-}) => {
-  const isExchangeLogin = props.product === ProductAuthOptions.EXCHANGE
+}
+
+const BackArrowHeader = ({
+  formValues,
+  handleBackArrowClick,
+  hideGuid,
+  marginTop,
+  platform,
+  product
+}: Props) => {
+  const isExchangeLogin = product === ProductAuthOptions.EXCHANGE
   const email = isExchangeLogin
-    ? props.formValues.exchangeEmail
-    : props.formValues.email || props.formValues.sofiLoginEmail
-  const guid = props.formValues?.guid
-  const firstPartGuid = guid && guid.slice(0, 4)
-  const lastPartGuid = guid && guid.slice(-4)
-  const hideBackArrow =
-    props.platform === PlatformTypes.ANDROID || props.platform === PlatformTypes.IOS
+    ? formValues.exchangeEmail
+    : formValues.email || formValues.sofiLoginEmail
+  const guid = formValues?.guid
+  const firstPartGuid = guid?.slice(0, 4)
+  const lastPartGuid = guid?.slice(-4)
+  const hideBackArrow = platform === PlatformTypes.ANDROID || platform === PlatformTypes.IOS
   return (
-    <>
-      <BackArrowWrapper marginTop={props.marginTop} hideBackArrow={hideBackArrow}>
-        {!hideBackArrow && (
-          <BackArrow onClick={props.handleBackArrowClick}>
-            <Icon
-              data-e2e='signupBack'
-              name='arrow-back'
-              size='24px'
-              color='blue600'
-              style={{ marginRight: '8px' }}
-              role='button'
-            />
+    <BackArrowWrapper marginTop={marginTop} hideBackArrow={hideBackArrow}>
+      {!hideBackArrow && (
+        <BackArrow onClick={handleBackArrowClick}>
+          <Icon
+            data-e2e='signupBack'
+            name='arrow-back'
+            size='24px'
+            color='blue600'
+            style={{ marginRight: '8px' }}
+            role='button'
+          />
 
-            <Text color='grey900' size='14px' weight={500} lineHeight='1.5'>
-              <FormattedMessage id='copy.back' defaultMessage='Back' />
-            </Text>
-          </BackArrow>
+          <Text color='grey900' size='14px' weight={500} lineHeight='1.5'>
+            <FormattedMessage id='copy.back' defaultMessage='Back' />
+          </Text>
+        </BackArrow>
+      )}
+      <EmailAndGuid>
+        {hideGuid || (email && isMobile()) || isExchangeLogin ? (
+          <Text
+            color='blue600'
+            size='12px'
+            weight={600}
+            lineHeight='1.5'
+            style={{ marginRight: '2px' }}
+          >
+            {email}
+          </Text>
+        ) : (
+          <Text color='grey400' size='12px' weight={600} lineHeight='1.5'>
+            ({firstPartGuid}...{lastPartGuid})
+          </Text>
         )}
-        <EmailAndGuid>
-          {props.hideGuid || email || (email && isMobile()) || isExchangeLogin ? (
-            <Text
-              color='blue600'
-              size='12px'
-              weight={600}
-              lineHeight='1.5'
-              style={{ marginRight: '2px' }}
-            >
-              {email}
-            </Text>
-          ) : (
-            <Text color='grey400' size='12px' weight={600} lineHeight='1.5'>
+        {formValues.step !== LoginSteps.CHECK_EMAIL &&
+          formValues.email &&
+          !hideGuid &&
+          !isMobile() &&
+          !isExchangeLogin && (
+            <Text size='12px' weight={500} color='grey400'>
               ({firstPartGuid}...{lastPartGuid})
             </Text>
           )}
-          {props.formValues.step !== LoginSteps.CHECK_EMAIL &&
-            props.formValues.email &&
-            !props.hideGuid &&
-            !isMobile() &&
-            !isExchangeLogin && (
-              <Text size='12px' weight={500} color='grey400'>
-                ({firstPartGuid}...{lastPartGuid})
-              </Text>
-            )}
-        </EmailAndGuid>
-      </BackArrowWrapper>
-    </>
+      </EmailAndGuid>
+    </BackArrowWrapper>
   )
 }
 
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/LoginSceneFooter/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/LoginSceneFooter/index.tsx
deleted file mode 100644
index d0baff30072..00000000000
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/LoginSceneFooter/index.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import { FormattedMessage } from 'react-intl'
-import styled from 'styled-components'
-
-import { Icon, Text } from 'blockchain-info-components'
-import { LoginSteps } from 'data/auth/types'
-
-const PhishingWarning = styled.div`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 4px;
-  background-color: ${(props) => props.theme.whiteFade100};
-  padding: 12px 32px;
-`
-
-export const loginSceneFooter = (step) => {
-  switch (step) {
-    case LoginSteps.ENTER_EMAIL_GUID:
-      return (
-        <>
-          <Text size='14px' color='grey400' weight={500} style={{ margin: '24px 0 16px' }}>
-            <FormattedMessage
-              id='scenes.login.phishingwarning'
-              defaultMessage='Please check that you are visiting the correct URL'
-            />
-          </Text>
-          <PhishingWarning>
-            <Icon name='padlock' color='grey400' size='14px' />
-            <Text color='grey400' weight={500} style={{ paddingLeft: '8px' }}>
-              https://login.blockchain.com
-            </Text>
-          </PhishingWarning>
-        </>
-      )
-    default:
-      return null
-  }
-}
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/NeedHelpLink/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/NeedHelpLink/index.tsx
index 34da7168997..7d0939cf863 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/NeedHelpLink/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/NeedHelpLink/index.tsx
@@ -1,19 +1,19 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
-import { connect, ConnectedProps } from 'react-redux'
+import { useDispatch } from 'react-redux'
 import { LinkContainer } from 'react-router-bootstrap'
-import { bindActionCreators } from 'redux'
 
 import { Link } from 'blockchain-info-components'
-import { actions } from 'data'
+import { trackEvent } from 'data/analytics/slice'
 import { Analytics } from 'data/analytics/types'
 import { PlatformTypes, ProductAuthOptions } from 'data/types'
 
-const NeedHelpLink = ({ analyticsActions, origin, platform, product, unified }: Props) => (
-  <LinkContainer
-    to={product === ProductAuthOptions.WALLET || unified ? '/recover' : '/help-exchange'}
-    onClick={() => {
-      analyticsActions.trackEvent({
+const NeedHelpLink = ({ origin, platform, product, unified }: Props) => {
+  const dispatch = useDispatch()
+
+  const onClick = () => {
+    dispatch(
+      trackEvent({
         key: Analytics.LOGIN_FORGOT_PASSWORD_CLICKED,
         properties: {
           device_origin: platform,
@@ -22,26 +22,25 @@ const NeedHelpLink = ({ analyticsActions, origin, platform, product, unified }:
           unified
         }
       })
-    }}
-  >
-    <Link size='13px' weight={600} data-e2e='loginForgotPassword'>
-      <FormattedMessage id='scenes.help.forgotpassword' defaultMessage='Forgot your password?' />
-    </Link>
-  </LinkContainer>
-)
+    )
+  }
 
-const mapDispatchToProps = (dispatch) => ({
-  analyticsActions: bindActionCreators(actions.analytics, dispatch)
-})
+  const linkTo = product === ProductAuthOptions.WALLET || unified ? '/recover' : '/help-exchange'
 
-const connector = connect(null, mapDispatchToProps)
+  return (
+    <LinkContainer to={linkTo} onClick={onClick}>
+      <Link size='13px' weight={600} data-e2e='loginForgotPassword'>
+        <FormattedMessage id='scenes.help.forgotpassword' defaultMessage='Forgot your password?' />
+      </Link>
+    </LinkContainer>
+  )
+}
 
-type OwnProps = {
+type Props = {
   origin: string
   platform?: PlatformTypes
   product: ProductAuthOptions
   unified?: boolean
 }
-type Props = OwnProps & ConnectedProps<typeof connector>
 
-export default connector(NeedHelpLink)
+export default NeedHelpLink
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/SignupLink/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/SignupLink/index.tsx
index eed1c7aee5c..5bb0a99d6e0 100644
--- a/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/SignupLink/index.tsx
+++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Login/components/SignupLink/index.tsx
@@ -37,10 +37,10 @@ const Row = styled.div`
   `}
 `
 
-const SignUpLink = (props) => {
-  const hideSignupLink =
-    props.platform === PlatformTypes.ANDROID || props.platform === PlatformTypes.IOS
-  return hideSignupLink ? null : (
+const SignUpLink = ({ platform }: { platform?: PlatformTypes }) => {
+  if (platform === PlatformTypes.ANDROID || platform === PlatformTypes.IOS) return null
+
+  return (
     <SubCard>
       <LinkContainer data-e2e='signupLink' to='/signup'>
         <Row>