Skip to content

Commit 853800a

Browse files
authored
chore(signup): code refactor (#6007)
1 parent 20e3c2f commit 853800a

File tree

9 files changed

+119
-159
lines changed

9 files changed

+119
-159
lines changed

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

Lines changed: 18 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import React, { useEffect } from 'react'
22
import { FormattedMessage } from 'react-intl'
3-
import { connect, ConnectedProps } from 'react-redux'
4-
import { find, isEmpty, isNil, propEq, propOr } from 'ramda'
5-
import { InjectedFormProps } from 'redux-form'
3+
import { useDispatch, useSelector } from 'react-redux'
4+
import { change, InjectedFormProps } from 'redux-form'
65
import styled from 'styled-components'
76

87
import Currencies from '@core/exchange/currencies'
8+
import { getIsCoinDataLoaded } from '@core/redux/data/coins/selectors'
99
import { Icon, Text } from 'blockchain-info-components'
10-
import { selectors } from 'data'
1110
import { BuySellWidgetGoalDataType } from 'data/types'
1211

1312
import { SIGNUP_FORM } from '..'
14-
import { Card, CardHeader, CardsWrapper, LoginLink, PaddingWrapper } from '../components'
13+
import { Card, CardHeader, CardsWrapper, PaddingWrapper } from '../components'
14+
import { LoginLink } from '../components/LoginLink'
1515
import SignupForm from '../components/SignupForm'
1616
import { SubviewProps } from '../types'
1717

@@ -56,17 +56,20 @@ const Amount = styled(Text)`
5656
text-overflow: ellipsis;
5757
`
5858

59-
const BuyGoal = (props: InjectedFormProps<{}> & SubviewProps & Props) => {
60-
const { formActions, goals, isCoinDataLoaded } = props
61-
const dataGoal = find(propEq('name', 'buySell'), goals)
62-
const goalData: BuySellWidgetGoalDataType = propOr({}, 'data', dataGoal)
59+
const BuyGoal = (props: InjectedFormProps<{}> & SubviewProps) => {
60+
const isCoinDataLoaded = useSelector(getIsCoinDataLoaded)
61+
const dispatch = useDispatch()
62+
63+
const { goals } = props
64+
const dataGoal = goals.find((goal) => goal.name === 'buySell')
65+
const goalData = dataGoal?.data ?? ({} as BuySellWidgetGoalDataType)
6366
const { amount, crypto, email, fiatCurrency } = goalData
64-
const showBuyHeader =
65-
!isNil(goalData) && !isEmpty(goalData) && !!fiatCurrency && !!crypto && !!amount
67+
const showBuyHeader = Object.keys(goalData).length > 0 && !!fiatCurrency && !!crypto && !!amount
6668

6769
useEffect(() => {
68-
formActions.change(SIGNUP_FORM, 'email', email)
69-
}, [formActions])
70+
dispatch(change(SIGNUP_FORM, 'email', email))
71+
}, [])
72+
7073
return (
7174
<>
7275
<CardsWrapper>
@@ -114,19 +117,11 @@ const BuyGoal = (props: InjectedFormProps<{}> & SubviewProps & Props) => {
114117
)}
115118
<SignupForm {...props} />
116119
</PaddingWrapper>
117-
<LoginLink analyticsActions={props.analyticsActions} unified={props.unified} />
120+
<LoginLink />
118121
</BuyCard>
119122
</CardsWrapper>
120123
</>
121124
)
122125
}
123126

124-
const mapStateToProps = (state) => ({
125-
isCoinDataLoaded: selectors.core.data.coins.getIsCoinDataLoaded(state)
126-
})
127-
128-
const connector = connect(mapStateToProps)
129-
130-
type Props = ConnectedProps<typeof connector>
131-
132-
export default connector(BuyGoal)
127+
export default BuyGoal

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -54,33 +54,36 @@ const ProductPickerContainer: React.FC<Props> = (props) => {
5454
return props.walletLoginData.cata({
5555
Failure: (error) =>
5656
error === 4 && isExchangeMobileSignup ? (
57-
<ExchangeMobileUserConflict {...props} />
57+
<ExchangeMobileUserConflict
58+
email={props.email}
59+
showExchangeLoginButton={props.showExchangeLoginButton}
60+
authActions={props.authActions}
61+
/>
5862
) : (
5963
<Error error={error} />
6064
),
6165
Loading: () => <SpinningLoader />,
6266
NotAsked: () => {
6367
if (isMetadataRecovery) {
6468
props.routerActions.push('/home')
65-
return null
69+
} else {
70+
props.routerActions.push('/login?product=exchange')
6671
}
67-
props.routerActions.push('/login?product=exchange')
6872
return null
6973
},
7074
Success: () =>
7175
showExchangeUserConflict ? (
72-
<ExchangeUserConflict {...props} walletRedirect={walletRedirect} />
76+
<ExchangeUserConflict email={props.email} walletRedirect={walletRedirect} />
7377
) : (
7478
<ProductPicker
75-
{...props}
7679
walletRedirect={walletRedirect}
7780
exchangeRedirect={exchangeRedirect}
81+
isAccountReset={props.isAccountReset}
7882
/>
7983
)
8084
})
8185
}
8286
const mapStateToProps = (state) => ({
83-
appEnv: selectors.core.walletOptions.getAppEnv(state).getOrElse('prod'),
8487
email: selectors.signup.getRegisterEmail(state) as string,
8588
exchangeUserConflict: selectors.auth.getExchangeConflictStatus(state) as boolean,
8689
isAccountReset: selectors.signup.getAccountReset(state) as boolean,
@@ -98,7 +101,6 @@ const mapStateToProps = (state) => ({
98101
const mapDispatchToProps = (dispatch) => ({
99102
authActions: bindActionCreators(actions.auth, dispatch),
100103
custodialActions: bindActionCreators(actions.custodial, dispatch),
101-
miscActions: bindActionCreators(actions.core.data.misc, dispatch),
102104
profileActions: bindActionCreators(actions.modules.profile, dispatch),
103105
routerActions: bindActionCreators(actions.router, dispatch),
104106
runGoals: () => dispatch(actions.goals.runGoals()),

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,6 @@ const ExchangeMobileUserConflict = ({ authActions, email, showExchangeLoginButto
7878
type Props = {
7979
email: string
8080
showExchangeLoginButton: boolean
81-
} & OwnProps
81+
} & Pick<OwnProps, 'authActions'>
8282

8383
export default ExchangeMobileUserConflict
Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import React from 'react'
2+
import { FormattedMessage } from 'react-intl'
3+
import { useDispatch, useSelector } from 'react-redux'
4+
import { LinkContainer } from 'react-router-bootstrap'
5+
import styled from 'styled-components'
6+
7+
import { Text } from 'blockchain-info-components'
8+
import { trackEvent } from 'data/analytics/slice'
9+
import { getUnifiedAccountStatus } from 'data/cache/selectors'
10+
import { Analytics } from 'data/types'
11+
import { media } from 'services/styles'
12+
13+
const LoginCard = styled.div`
14+
display: flex;
15+
justify-content: center;
16+
margin-top: 24px;
17+
border-top: 1px solid ${(props) => props.theme.grey000};
18+
padding-bottom: 1.5rem;
19+
${media.tabletL`
20+
flex-direction: column;
21+
align-items: center;
22+
`};
23+
`
24+
const LoginLinkText = styled(Text)`
25+
margin-top: 16px;
26+
cursor: pointer;
27+
${media.mobile`
28+
margin-top: 0;
29+
`};
30+
&:hover {
31+
font-weight: 600;
32+
}
33+
`
34+
const LoginLinkRow = styled.div`
35+
display: flex;
36+
align-items: center;
37+
${media.mobile`
38+
flex-direction: column;
39+
align-items: center;
40+
`}
41+
`
42+
43+
export const LoginLink = () => {
44+
const dispatch = useDispatch()
45+
46+
const unified = useSelector(getUnifiedAccountStatus)
47+
48+
return (
49+
<LoginCard>
50+
<LinkContainer data-e2e='signupLink' to='/login'>
51+
<LoginLinkRow
52+
onClick={() =>
53+
dispatch(
54+
trackEvent({
55+
key: Analytics.LOGIN_CLICKED,
56+
properties: {
57+
origin: 'SIGN_UP_FLOW',
58+
unified
59+
}
60+
})
61+
)
62+
}
63+
>
64+
<Text
65+
size='16px'
66+
color='grey600'
67+
weight={500}
68+
style={{ cursor: 'pointer', marginTop: '16px' }}
69+
>
70+
<FormattedMessage
71+
id='scenes.register.account.link'
72+
defaultMessage='Already have a Blockchain.com Account?'
73+
/>
74+
</Text>
75+
&nbsp;
76+
<LoginLinkText size='16px' color='blue600' weight={600}>
77+
<FormattedMessage id='scenes.login.wallet.exchange_login' defaultMessage='Log In ->' />
78+
</LoginLinkText>
79+
</LoginLinkRow>
80+
</LinkContainer>
81+
</LoginCard>
82+
)
83+
}

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

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,8 @@ import { PlatformTypes } from 'data/types'
88
import { isMobile, media } from 'services/styles'
99

1010
import { SubviewProps } from '../../types'
11-
import {
12-
Card,
13-
CardInfo,
14-
CardTitle,
15-
CardWrapper,
16-
InfoItem,
17-
InfoTitle,
18-
LoginLink,
19-
PaddingWrapper
20-
} from '..'
11+
import { Card, CardInfo, CardTitle, CardWrapper, InfoItem, InfoTitle, PaddingWrapper } from '..'
12+
import { LoginLink } from '../LoginLink'
2113
import SignupForm from '../SignupForm'
2214
import QRsModal, { QRModalType } from '../SignupForm/QRsModal'
2315

@@ -196,11 +188,7 @@ const SignupCard = (props: InjectedFormProps<{}> & SubviewProps) => {
196188
</Bottom>
197189
</AppButtons>
198190
)}
199-
{isExchangeMobileSignup ? (
200-
<Bottom />
201-
) : (
202-
<LoginLink analyticsActions={props.analyticsActions} unified={props.unified} />
203-
)}
191+
{isExchangeMobileSignup ? <Bottom /> : <LoginLink />}
204192
</Card>
205193
</CardWrapper>
206194
</>
Lines changed: 1 addition & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
import React from 'react'
2-
import { FormattedMessage } from 'react-intl'
3-
import { LinkContainer } from 'react-router-bootstrap'
4-
import styled, { DefaultTheme } from 'styled-components'
1+
import styled from 'styled-components'
52

63
import { Text } from 'blockchain-info-components'
7-
import { Analytics } from 'data/types'
84
import { media } from 'services/styles'
95

106
export const CardWrapper = styled.div<{ hideMargin?: boolean }>`
@@ -47,22 +43,7 @@ export const CardHeader = styled.div`
4743
align-items: center;
4844
display: flex;
4945
`
50-
export const IconWrapper = styled.div<{ color: keyof DefaultTheme }>`
51-
display: flex;
52-
background: ${(props) => props.theme[props.color]};
53-
height: 3rem;
54-
width: 3rem;
55-
justify-content: center;
56-
align-items: center;
57-
border-radius: 50%;
58-
margin-right: 1.25rem;
5946

60-
${media.tablet`
61-
height: 2.5rem;
62-
width: 2.5rem;
63-
flex-shrink: 0;
64-
`}
65-
`
6647
export const CardsWrapper = styled.div`
6748
display: flex;
6849
@@ -103,78 +84,3 @@ export const InfoItem = styled.div`
10384
`}
10485
}
10586
`
106-
export const SubCard = styled.div`
107-
display: flex;
108-
justify-content: center;
109-
margin-top: 1.25rem;
110-
margin-bottom: 2.5rem;
111-
`
112-
export const SignInText = styled(Text)`
113-
&:hover {
114-
color: ${(props) => props.theme.white};
115-
font-weight: 600;
116-
}
117-
`
118-
const LoginCard = styled.div`
119-
display: flex;
120-
justify-content: center;
121-
margin-top: 24px;
122-
border-top: 1px solid ${(props) => props.theme.grey000};
123-
padding-bottom: 1.5rem;
124-
${media.tabletL`
125-
flex-direction: column;
126-
align-items: center;
127-
`};
128-
`
129-
const LoginLinkText = styled(Text)`
130-
margin-top: 16px;
131-
cursor: pointer;
132-
${media.mobile`
133-
margin-top: 0;
134-
`};
135-
&:hover {
136-
font-weight: 600;
137-
}
138-
`
139-
const LoginLinkRow = styled.div`
140-
display: flex;
141-
align-items: center;
142-
${media.mobile`
143-
flex-direction: column;
144-
align-items: center;
145-
`}
146-
`
147-
148-
export const LoginLink = (props: { analyticsActions; unified }) => (
149-
<LoginCard>
150-
<LinkContainer data-e2e='signupLink' to='/login'>
151-
<LoginLinkRow
152-
onClick={() =>
153-
props.analyticsActions.trackEvent({
154-
key: Analytics.LOGIN_CLICKED,
155-
properties: {
156-
origin: 'SIGN_UP_FLOW',
157-
unified: props.unified
158-
}
159-
})
160-
}
161-
>
162-
<Text
163-
size='16px'
164-
color='grey600'
165-
weight={500}
166-
style={{ cursor: 'pointer', marginTop: '16px' }}
167-
>
168-
<FormattedMessage
169-
id='scenes.register.account.link'
170-
defaultMessage='Already have a Blockchain.com Account?'
171-
/>
172-
</Text>
173-
&nbsp;
174-
<LoginLinkText size='16px' color='blue600' weight={600}>
175-
<FormattedMessage id='scenes.login.wallet.exchange_login' defaultMessage='Log In ->' />
176-
</LoginLinkText>
177-
</LoginLinkRow>
178-
</LinkContainer>
179-
</LoginCard>
180-
)

0 commit comments

Comments
 (0)