diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/BuyGoal/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/BuyGoal/index.tsx index c9daa818e83..f884ae424d9 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/BuyGoal/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/BuyGoal/index.tsx @@ -71,56 +71,54 @@ const BuyGoal = (props: InjectedFormProps<{}> & SubviewProps) => { }, []) return ( - <> - - - - - + + + + + + + + + {showBuyHeader && isCoinDataLoaded && ( + <> + + + + + {Currencies[fiatCurrency].units[fiatCurrency].symbol} + + + {amount} + + + + + + + {window.coins[crypto].coinfig.name} + + + {crypto} + + + + + - - {showBuyHeader && isCoinDataLoaded && ( - <> - - - - - {Currencies[fiatCurrency].units[fiatCurrency].symbol} - - - {amount} - - - - - - - {window.coins[crypto].coinfig.name} - - - {crypto} - - - - - - - - - )} - - - - - - + + )} + + + + + ) } diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/SofiSignupFailure/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/SofiSignupFailure/index.tsx index 1953ea519d9..2adfa6e1e41 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/SofiSignupFailure/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/SofiSignupFailure/index.tsx @@ -1,13 +1,9 @@ import React from 'react' import { FormattedMessage } from 'react-intl' -import { useDispatch } from 'react-redux' import styled from 'styled-components' -import { Button, Image, Text } from 'blockchain-info-components' +import { Image, Text } from 'blockchain-info-components' import { Wrapper } from 'components/Public' -import { actions, selectors } from 'data' -import { useRemote } from 'hooks' -import { isMobile } from 'services/styles' const ContentWrapper = styled.div` display: flex; @@ -17,15 +13,6 @@ const ContentWrapper = styled.div` ` const MigrationError = () => { - // Add check here to make sure that there is wallet data - // route should navigate to login if there's no wallet data - - const { - data: isMigrated, - hasError: isAssociatedError, - isLoading: isAssociatedLoading - } = useRemote(selectors.modules.profile.getSofiAssociateNabuUserStatus) - return ( diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupCard/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupCard/index.tsx index 2e855625d52..1cf976e3ce2 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupCard/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupCard/index.tsx @@ -7,7 +7,7 @@ import { Icon, Text } from 'blockchain-info-components' import { isMobile } from 'services/styles' import { SubviewProps } from '../../types' -import { Card, CardTitle, CardWrapper, InfoItem, InfoTitle } from '..' +import { Card, CardTitle, CardWrapper } from '..' import QRsModal, { QRModalType } from '../SignupForm/QRsModal' import SofiSignupForm from '../SofiSignupForm' diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupForm/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupForm/index.tsx index bdd870b53a7..14798d92f5b 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupForm/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/components/SofiSignupForm/index.tsx @@ -63,13 +63,11 @@ const SofiSignupForm = (props: Props) => { bakktRedirectUSStates, formActions, formValues, - goals, initialValues, invalid, isFormSubmitting, onSignupSubmit, - routerActions, - setShowModal + routerActions } = props const { sofiJwtPayload } = useSelector(selectors.modules.profile.getSofiUserData).getOrElse( @@ -244,6 +242,6 @@ const SofiSignupForm = (props: Props) => { ) } -type Props = InjectedFormProps<{}> & SubviewProps & { setShowModal?: (e) => void } +type Props = InjectedFormProps<{}> & SubviewProps export default SofiSignupForm diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/index.tsx index 17d7dd8bb93..8d0f609adbd 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/Signup/index.tsx @@ -1,7 +1,6 @@ -import React from 'react' +import React, { useEffect, useState } from 'react' import { connect, ConnectedProps } from 'react-redux' -import axios from 'axios' -import { find, pathOr, propEq } from 'ramda' +import { pathOr } from 'ramda' import { bindActionCreators, compose, Dispatch } from 'redux' import { InjectedFormProps, reduxForm } from 'redux-form' import styled from 'styled-components' @@ -13,6 +12,7 @@ import { UkBanner } from 'components/Banner' import { actions, selectors } from 'data' import { RootState } from 'data/rootReducer' import { + GoalsType, ProductAuthMetadata, ProductSignupMetadata, RegisteringFailureType, @@ -61,44 +61,29 @@ const UKHeaderWrapper = styled.div` top: 0; z-index: 2; ` - export const SIGNUP_FORM = 'register' -const qsParams = new URLSearchParams(window.location.hash) -const isLatam = qsParams.has('latam') - -class SignupContainer extends React.PureComponent< - InjectedFormProps<{}, Props> & Props, - StateProps -> { - constructor(props) { - super(props) - this.state = { - showForm: true, - showState: false - } - } +const isLatam = new URLSearchParams(window.location.hash).has('latam') - componentDidMount() { - const { signupActions, websocketActions } = this.props - // start sockets to ensure email verify flow is detected - websocketActions.startSocket() - signupActions.initializeSignup() - if (window?._SardineContext) { - window._SardineContext.updateConfig({ - flow: 'SIGNUP' - }) - } +const findGoalByName = (name: GoalsType, goals: GoalDataType) => + goals.find((goal) => goal.name === name) + +const SignupContainer: React.FC & Props> = (props) => { + const [showForm, setShowForm] = useState(true) + const [showState, setShowState] = useState(false) + + const setDefaultCountry = (country: string) => { + setShowState(country === 'US') } - onCountryChange = (e: React.ChangeEvent | undefined, value: string) => { - this.setDefaultCountry(value) - this.props.formActions.clearFields(SIGNUP_FORM, false, false, 'state') + const onCountryChange = (e: React.ChangeEvent | undefined, value: string) => { + setDefaultCountry(value) + props.formActions.clearFields(SIGNUP_FORM, false, false, 'state') } - onSubmit = (e) => { + const onSubmit = (e) => { e.preventDefault() - const { formValues, language, signupActions } = this.props + const { formValues, language, signupActions } = props const { country, email, password, referral, state } = formValues signupActions.register({ @@ -111,74 +96,84 @@ class SignupContainer extends React.PureComponent< }) } - setCountryOnLoad = (country: string) => { - this.setDefaultCountry(country) - this.props.formActions.change(SIGNUP_FORM, 'country', country) + const setCountryOnLoad = (country: string) => { + setDefaultCountry(country) + props.formActions.change(SIGNUP_FORM, 'country', country) } - setDefaultCountry = (country: string) => { - this.setState({ showState: country === 'US' }) + const toggleSignupFormVisibility = () => { + setShowForm(true) } - toggleSignupFormVisibility = () => { - this.setState({ showForm: true }) - } - - render() { - const { formValues, goals, isLoadingR, productAuthMetadata } = this.props - const isFormSubmitting = Remote.Loading.is(isLoadingR) - const isUserInUK = productAuthMetadata?.ipCountry === 'GB' - const userSelectedUK = formValues?.country === 'GB' - // pull email from simple buy goal if it exists or signup goal - const email = - pathOr('', ['data', 'email'], find(propEq('name', 'buySell'), goals)) || - pathOr('', ['data', 'email'], find(propEq('name', 'signup'), goals)) - - const signupInitialValues = (email ? { email } : {}) as SignupFormInitValuesType - const isLinkAccountGoal = !!find(propEq('name', 'linkAccount'), goals) - const isBuyGoal = !!find(propEq('name', 'buySell'), goals) - const isSofi = window.location.hash.includes('sofi') - - const subviewProps = { - isFormSubmitting, - isLinkAccountGoal, - onCountrySelect: this.onCountryChange, - onSignupSubmit: this.onSubmit, - setDefaultCountry: this.setCountryOnLoad, - showForm: this.state.showForm, - showState: this.state.showState, - toggleSignupFormVisibility: this.toggleSignupFormVisibility, - ...this.props, // order here matters as we may need to override initial form values! - initialValues: signupInitialValues + useEffect(() => { + const { signupActions, websocketActions } = props + // start sockets to ensure email verify flow is detected + websocketActions.startSocket() + signupActions.initializeSignup() + if (window?._SardineContext) { + window._SardineContext.updateConfig({ + flow: 'SIGNUP' + }) } + }, []) + + const { formValues, goals, isLoadingR, productAuthMetadata } = props + const isFormSubmitting = Remote.Loading.is(isLoadingR) + const isUserInUK = productAuthMetadata?.ipCountry === 'GB' + const userSelectedUK = formValues?.country === 'GB' + + const buySellGoal = findGoalByName('buySell', goals) + const signupGoal = findGoalByName('signup', goals) + const linkAccountGoal = findGoalByName('linkAccount', goals) + + // pull email from simple buy goal if it exists or signup goal + const email = + pathOr('', ['data', 'email'], buySellGoal) || pathOr('', ['data', 'email'], signupGoal) + + const signupInitialValues = (email ? { email } : {}) as SignupFormInitValuesType + const isLinkAccountGoal = !!linkAccountGoal + const isBuyGoal = !!buySellGoal + const isSofi = window.location.hash.includes('sofi') + + const subviewProps = { + isFormSubmitting, + isLinkAccountGoal, + onCountrySelect: onCountryChange, + onSignupSubmit: onSubmit, + setDefaultCountry: setCountryOnLoad, + showForm, + showState, + toggleSignupFormVisibility, + ...props, // order here matters as we may need to override initial form values! + initialValues: signupInitialValues + } - return ( - <> - {(isUserInUK || userSelectedUK) && ( - - - + return ( + <> + {(isUserInUK || userSelectedUK) && ( + + + + )} + + {isSofi && } + {isLatam &&
} + {isLinkAccountGoal && } + {isBuyGoal && } + {!isLinkAccountGoal && !isBuyGoal && !isLatam && !isSofi && ( + )} - - {isSofi && } - {isLatam &&
} - {isLinkAccountGoal && } - {isBuyGoal && } - {!isLinkAccountGoal && !isBuyGoal && !isLatam && !isSofi && ( + {!isLinkAccountGoal && !isBuyGoal && !isSofi && isLatam && ( + - )} - {!isLinkAccountGoal && !isBuyGoal && !isSofi && isLatam && ( - - - - - - - )} - - - ) - } + + + + + )} + + + ) } const mapStateToProps = (state: RootState): LinkStatePropsType => ({ @@ -195,10 +190,7 @@ const mapStateToProps = (state: RootState): LinkStatePropsType => ({ isValidReferralCode: selectors.signup.getIsValidReferralCode(state), language: selectors.preferences.getLanguage(state), productAuthMetadata: selectors.auth.getProductAuthMetadata(state), - registering: selectors.signup.getRegistering(state) as RemoteDataType< - RegisteringFailureType, - RegisteringSuccessType - >, + registering: selectors.signup.getRegistering(state), search: selectors.router.getSearch(state) as string, signupMetadata: selectors.signup.getProductSignupMetadata(state) as ProductSignupMetadata }) @@ -227,11 +219,6 @@ type LinkStatePropsType = { search: string signupMetadata: ProductSignupMetadata } -type StateProps = { - geoCountryCode?: string - showForm: boolean - showState: boolean -} export type Props = ConnectedProps & LinkStatePropsType diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/app.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/app.tsx index 4f90a234240..d97e8b33c97 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/app.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/scenes/app.tsx @@ -66,11 +66,7 @@ const Dex = React.lazy(() => import('./Dex')) // NFTs const NftsView = React.lazy(() => import('./Nfts/View')) -const NftsFirehose = React.lazy(() => import('./Nfts/Firehose')) -const NftsCollection = React.lazy(() => import('./Nfts/Collection/Collection')) const NftsAsset = React.lazy(() => import('./Nfts/AssetViewOnly')) -const NftsAddress = React.lazy(() => import('./Nfts/Address/Address')) -const NftsSettings = React.lazy(() => import('./Nfts/Settings')) // WALLET const Addresses = React.lazy(() => import('./Settings/Addresses')) @@ -208,11 +204,6 @@ const App = ({ component={Signup} pageTitle={`${BLOCKCHAIN_TITLE} | SoFi Signup`} /> -