chore(signup): code refactor (#6007)

Author: mperdomo-bc

packages/blockchain-wallet-v4-frontend/src/scenes/Signup/BuyGoal/index.tsx

@@ -1,17 +1,17 @@
 import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
-import { connect, ConnectedProps } from 'react-redux'
-import { find, isEmpty, isNil, propEq, propOr } from 'ramda'
-import { InjectedFormProps } from 'redux-form'
+import { useDispatch, useSelector } from 'react-redux'
+import { change, InjectedFormProps } from 'redux-form'
 import styled from 'styled-components'
 
 import Currencies from '@core/exchange/currencies'
+import { getIsCoinDataLoaded } from '@core/redux/data/coins/selectors'
 import { Icon, Text } from 'blockchain-info-components'
-import { selectors } from 'data'
 import { BuySellWidgetGoalDataType } from 'data/types'
 
 import { SIGNUP_FORM } from '..'
-import { Card, CardHeader, CardsWrapper, LoginLink, PaddingWrapper } from '../components'
+import { Card, CardHeader, CardsWrapper, PaddingWrapper } from '../components'
+import { LoginLink } from '../components/LoginLink'
 import SignupForm from '../components/SignupForm'
 import { SubviewProps } from '../types'
 
@@ -56,17 +56,20 @@ const Amount = styled(Text)`
   text-overflow: ellipsis;
 `
 
-const BuyGoal = (props: InjectedFormProps<{}> & SubviewProps & Props) => {
-  const { formActions, goals, isCoinDataLoaded } = props
-  const dataGoal = find(propEq('name', 'buySell'), goals)
-  const goalData: BuySellWidgetGoalDataType = propOr({}, 'data', dataGoal)
+const BuyGoal = (props: InjectedFormProps<{}> & SubviewProps) => {
+  const isCoinDataLoaded = useSelector(getIsCoinDataLoaded)
+  const dispatch = useDispatch()
+
+  const { goals } = props
+  const dataGoal = goals.find((goal) => goal.name === 'buySell')
+  const goalData = dataGoal?.data ?? ({} as BuySellWidgetGoalDataType)
   const { amount, crypto, email, fiatCurrency } = goalData
-  const showBuyHeader =
-    !isNil(goalData) && !isEmpty(goalData) && !!fiatCurrency && !!crypto && !!amount
+  const showBuyHeader = Object.keys(goalData).length > 0 && !!fiatCurrency && !!crypto && !!amount
 
   useEffect(() => {
-    formActions.change(SIGNUP_FORM, 'email', email)
-  }, [formActions])
+    dispatch(change(SIGNUP_FORM, 'email', email))
+  }, [])
+
   return (
     <>
       <CardsWrapper>
@@ -114,19 +117,11 @@ const BuyGoal = (props: InjectedFormProps<{}> & SubviewProps & Props) => {
             )}
             <SignupForm {...props} />
           </PaddingWrapper>
-          <LoginLink analyticsActions={props.analyticsActions} unified={props.unified} />
+          <LoginLink />
         </BuyCard>
       </CardsWrapper>
     </>
   )
 }
 
-const mapStateToProps = (state) => ({
-  isCoinDataLoaded: selectors.core.data.coins.getIsCoinDataLoaded(state)
-})
-
-const connector = connect(mapStateToProps)
-
-type Props = ConnectedProps<typeof connector>
-
-export default connector(BuyGoal)
+export default BuyGoal

packages/blockchain-wallet-v4-frontend/src/scenes/Signup/ProductPicker/index.tsx

@@ -54,33 +54,36 @@ const ProductPickerContainer: React.FC<Props> = (props) => {
   return props.walletLoginData.cata({
     Failure: (error) =>
       error === 4 && isExchangeMobileSignup ? (
-        <ExchangeMobileUserConflict {...props} />
+        <ExchangeMobileUserConflict
+          email={props.email}
+          showExchangeLoginButton={props.showExchangeLoginButton}
+          authActions={props.authActions}
+        />
       ) : (
         <Error error={error} />
       ),
     Loading: () => <SpinningLoader />,
     NotAsked: () => {
       if (isMetadataRecovery) {
         props.routerActions.push('/home')
-        return null
+      } else {
+        props.routerActions.push('/login?product=exchange')
       }
-      props.routerActions.push('/login?product=exchange')
       return null
     },
     Success: () =>
       showExchangeUserConflict ? (
-        <ExchangeUserConflict {...props} walletRedirect={walletRedirect} />
+        <ExchangeUserConflict email={props.email} walletRedirect={walletRedirect} />
       ) : (
         <ProductPicker
-          {...props}
           walletRedirect={walletRedirect}
           exchangeRedirect={exchangeRedirect}
+          isAccountReset={props.isAccountReset}
         />
       )
   })
 }
 const mapStateToProps = (state) => ({
-  appEnv: selectors.core.walletOptions.getAppEnv(state).getOrElse('prod'),
   email: selectors.signup.getRegisterEmail(state) as string,
   exchangeUserConflict: selectors.auth.getExchangeConflictStatus(state) as boolean,
   isAccountReset: selectors.signup.getAccountReset(state) as boolean,
@@ -98,7 +101,6 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) => ({
   authActions: bindActionCreators(actions.auth, dispatch),
   custodialActions: bindActionCreators(actions.custodial, dispatch),
-  miscActions: bindActionCreators(actions.core.data.misc, dispatch),
   profileActions: bindActionCreators(actions.modules.profile, dispatch),
   routerActions: bindActionCreators(actions.router, dispatch),
   runGoals: () => dispatch(actions.goals.runGoals()),

packages/blockchain-wallet-v4-frontend/src/scenes/Signup/ProductPicker/template.error.exchangeMobile.tsx

@@ -78,6 +78,6 @@ const ExchangeMobileUserConflict = ({ authActions, email, showExchangeLoginButto
 type Props = {
   email: string
   showExchangeLoginButton: boolean
-} & OwnProps
+} & Pick<OwnProps, 'authActions'>
 
 export default ExchangeMobileUserConflict

packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/LoginLink/index.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import { useDispatch, useSelector } from 'react-redux'
+import { LinkContainer } from 'react-router-bootstrap'
+import styled from 'styled-components'
+
+import { Text } from 'blockchain-info-components'
+import { trackEvent } from 'data/analytics/slice'
+import { getUnifiedAccountStatus } from 'data/cache/selectors'
+import { Analytics } from 'data/types'
+import { media } from 'services/styles'
+
+const LoginCard = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 24px;
+  border-top: 1px solid ${(props) => props.theme.grey000};
+  padding-bottom: 1.5rem;
+  ${media.tabletL`
+    flex-direction: column;
+    align-items: center;
+  `};
+`
+const LoginLinkText = styled(Text)`
+  margin-top: 16px;
+  cursor: pointer;
+  ${media.mobile`
+    margin-top: 0;
+  `};
+  &:hover {
+    font-weight: 600;
+  }
+`
+const LoginLinkRow = styled.div`
+  display: flex;
+  align-items: center;
+  ${media.mobile`
+    flex-direction: column;
+    align-items: center;
+  `}
+`
+
+export const LoginLink = () => {
+  const dispatch = useDispatch()
+
+  const unified = useSelector(getUnifiedAccountStatus)
+
+  return (
+    <LoginCard>
+      <LinkContainer data-e2e='signupLink' to='/login'>
+        <LoginLinkRow
+          onClick={() =>
+            dispatch(
+              trackEvent({
+                key: Analytics.LOGIN_CLICKED,
+                properties: {
+                  origin: 'SIGN_UP_FLOW',
+                  unified
+                }
+              })
+            )
+          }
+        >
+          <Text
+            size='16px'
+            color='grey600'
+            weight={500}
+            style={{ cursor: 'pointer', marginTop: '16px' }}
+          >
+            <FormattedMessage
+              id='scenes.register.account.link'
+              defaultMessage='Already have a Blockchain.com Account?'
+            />
+          </Text>
+          &nbsp;
+          <LoginLinkText size='16px' color='blue600' weight={600}>
+            <FormattedMessage id='scenes.login.wallet.exchange_login' defaultMessage='Log In ->' />
+          </LoginLinkText>
+        </LoginLinkRow>
+      </LinkContainer>
+    </LoginCard>
+  )
+}

packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SignupCard/index.tsx

@@ -8,16 +8,8 @@ import { PlatformTypes } from 'data/types'
 import { isMobile, media } from 'services/styles'
 
 import { SubviewProps } from '../../types'
-import {
-  Card,
-  CardInfo,
-  CardTitle,
-  CardWrapper,
-  InfoItem,
-  InfoTitle,
-  LoginLink,
-  PaddingWrapper
-} from '..'
+import { Card, CardInfo, CardTitle, CardWrapper, InfoItem, InfoTitle, PaddingWrapper } from '..'
+import { LoginLink } from '../LoginLink'
 import SignupForm from '../SignupForm'
 import QRsModal, { QRModalType } from '../SignupForm/QRsModal'
 
@@ -196,11 +188,7 @@ const SignupCard = (props: InjectedFormProps<{}> & SubviewProps) => {
               </Bottom>
             </AppButtons>
           )}
-          {isExchangeMobileSignup ? (
-            <Bottom />
-          ) : (
-            <LoginLink analyticsActions={props.analyticsActions} unified={props.unified} />
-          )}
+          {isExchangeMobileSignup ? <Bottom /> : <LoginLink />}
         </Card>
       </CardWrapper>
     </>

packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/index.tsx

@@ -1,10 +1,6 @@
-import React from 'react'
-import { FormattedMessage } from 'react-intl'
-import { LinkContainer } from 'react-router-bootstrap'
-import styled, { DefaultTheme } from 'styled-components'
+import styled from 'styled-components'
 
 import { Text } from 'blockchain-info-components'
-import { Analytics } from 'data/types'
 import { media } from 'services/styles'
 
 export const CardWrapper = styled.div<{ hideMargin?: boolean }>`
@@ -47,22 +43,7 @@ export const CardHeader = styled.div`
   align-items: center;
   display: flex;
 `
-export const IconWrapper = styled.div<{ color: keyof DefaultTheme }>`
-  display: flex;
-  background: ${(props) => props.theme[props.color]};
-  height: 3rem;
-  width: 3rem;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  margin-right: 1.25rem;
 
-  ${media.tablet`
-    height: 2.5rem;
-    width: 2.5rem;
-    flex-shrink: 0;
-  `}
-`
 export const CardsWrapper = styled.div`
   display: flex;
 
@@ -103,78 +84,3 @@ export const InfoItem = styled.div`
     `}
   }
 `
-export const SubCard = styled.div`
-  display: flex;
-  justify-content: center;
-  margin-top: 1.25rem;
-  margin-bottom: 2.5rem;
-`
-export const SignInText = styled(Text)`
-  &:hover {
-    color: ${(props) => props.theme.white};
-    font-weight: 600;
-  }
-`
-const LoginCard = styled.div`
-  display: flex;
-  justify-content: center;
-  margin-top: 24px;
-  border-top: 1px solid ${(props) => props.theme.grey000};
-  padding-bottom: 1.5rem;
-  ${media.tabletL`
-  flex-direction: column;
-  align-items: center;
-`};
-`
-const LoginLinkText = styled(Text)`
-  margin-top: 16px;
-  cursor: pointer;
-  ${media.mobile`
-  margin-top: 0;
-`};
-  &:hover {
-    font-weight: 600;
-  }
-`
-const LoginLinkRow = styled.div`
-  display: flex;
-  align-items: center;
-  ${media.mobile`
-flex-direction: column;
-align-items: center;
-`}
-`
-
-export const LoginLink = (props: { analyticsActions; unified }) => (
-  <LoginCard>
-    <LinkContainer data-e2e='signupLink' to='/login'>
-      <LoginLinkRow
-        onClick={() =>
-          props.analyticsActions.trackEvent({
-            key: Analytics.LOGIN_CLICKED,
-            properties: {
-              origin: 'SIGN_UP_FLOW',
-              unified: props.unified
-            }
-          })
-        }
-      >
-        <Text
-          size='16px'
-          color='grey600'
-          weight={500}
-          style={{ cursor: 'pointer', marginTop: '16px' }}
-        >
-          <FormattedMessage
-            id='scenes.register.account.link'
-            defaultMessage='Already have a Blockchain.com Account?'
-          />
-        </Text>
-        &nbsp;
-        <LoginLinkText size='16px' color='blue600' weight={600}>
-          <FormattedMessage id='scenes.login.wallet.exchange_login' defaultMessage='Log In ->' />
-        </LoginLinkText>
-      </LoginLinkRow>
-    </LinkContainer>
-  </LoginCard>
-)