fix(sb): change step requirements to match data

packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts

@@ -1092,6 +1092,7 @@ type MessagesType = {
   'modals.signmessage.secondstep.message': 'Message:'
   'modals.signmessage.secondstep.signature': 'Signature:'
   'modals.signmessage.title': 'Sign Message'
+  'modals.simplebuy.fetching_methods': 'Loading Payment Options...'
   'modals.simplebuy.billing_address': 'Billing Address'
   'modals.simplebuy.buycrypto': 'Buy Crypto'
   'modals.simplebuy.canceled': 'Trade Canceled'

packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts

@@ -374,13 +374,11 @@ export const initializeBillingAddress = () => ({
 })
 
 export const initializeCheckout = (
-  pairs: Array<SBPairType>,
   paymentMethods: SBPaymentMethodsType,
   cards: Array<SBCardType>,
   orderType: 'BUY' | 'SELL'
 ) => ({
   type: AT.INITIALIZE_CHECKOUT,
-  pairs,
   paymentMethods,
   cards,
   orderType

packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts

@@ -192,7 +192,7 @@ export default ({
       const values: SBCheckoutFormValuesType = yield select(
         selectors.form.getFormValues('simpleBuyCheckout')
       )
-      const pair = values.pair
+      const pair = S.getSBPair(yield select())
       const amount = convertStandardToBase('FIAT', values.amount)
       if (!pair) throw new Error(NO_PAIR_SELECTED)
       // TODO: Simple Buy - make dynamic
@@ -531,7 +531,6 @@ export default ({
   }
 
   const initializeCheckout = function * ({
-    pairs,
     paymentMethods,
     cards,
     orderType
@@ -540,17 +539,13 @@ export default ({
       yield call(createUser)
       yield call(waitForUserData)
 
-      const cryptoCurrency = S.getCryptoCurrency(yield select())
       const defaultMethod = S.getDefaultMethod(yield select())
       const fiatCurrency = S.getFiatCurrency(yield select())
       if (!fiatCurrency) throw new Error(NO_FIAT_CURRENCY)
 
       yield put(A.fetchSBSuggestedAmounts(fiatCurrency))
 
       const isSimpleBuyCCInvited = true
-      const pair = pairs.find(
-        pair => getCoinFromPair(pair.pair) === cryptoCurrency
-      )
       const cardMethod = paymentMethods.methods.find(
         method => method.type === 'PAYMENT_CARD'
       )
@@ -575,8 +570,7 @@ export default ({
             : paymentMethods.methods.find(
                 method => method.type === 'BANK_ACCOUNT'
               ),
-          orderType,
-          pair: pair || pairs[0]
+          orderType
         } as SBCheckoutFormValuesType)
       )
     } catch (e) {

packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts

@@ -36,7 +36,6 @@ export type SBCheckoutFormValuesType = {
   amount: string
   method?: SBFormPaymentMethod
   orderType: 'BUY' | 'SELL'
-  pair?: SBPairType
 }
 export type SBCurrencySelectFormType = {
   search: string

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoItem/index.tsx

@@ -0,0 +1,93 @@
+import {
+  CoinType,
+  SBPairType,
+  SupportedCoinsType,
+  SupportedCoinType
+} from 'core/types'
+import { fiatToString } from 'core/exchange/currency'
+import {
+  getCoinFromPair,
+  getFiatFromPair
+} from 'data/components/simpleBuy/model'
+import { Icon, Text } from 'blockchain-info-components'
+import { RatesType } from 'data/types'
+import React from 'react'
+import styled from 'styled-components'
+
+const DisplayContainer = styled.div<{
+  coinType: SupportedCoinType
+}>`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  box-sizing: border-box;
+  padding: 16px 40px;
+  border-bottom: 1px solid ${props => props.theme.grey000};
+  &hover {
+    background-color: ${props => props.theme.grey100};
+  }
+`
+const Display = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin-left: 12px;
+  width: 100%;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+  color: ${props => props.theme.grey800};
+`
+const DisplayName = styled(Text)`
+  font-weight: 600;
+`
+
+const Rate = styled(Text)`
+  font-size: 14px;
+  font-weight: 500;
+  margin-top: 4px;
+  color: ${props => props.theme.grey600} !important;
+  > span {
+    color: ${props => props.theme.green500};
+  }
+`
+
+export type Props = {
+  onClick: (string) => void
+  rates: { [key in CoinType]: RatesType }
+  supportedCoins: SupportedCoinsType
+  value: SBPairType
+}
+
+const CryptoItem: React.FC<Props> = props => {
+  const coin = getCoinFromPair(props.value.pair)
+  const fiat = getFiatFromPair(props.value.pair)
+  const coinType = props.supportedCoins[coin]
+  const displayName = coinType.displayName
+  const icon = coinType.icons.circleFilled
+  const color = coinType.colorCode
+
+  return (
+    <DisplayContainer
+      coinType={coinType}
+      data-e2e={`sb${props.value.pair}CurrencySelector`}
+      role='button'
+      onClick={props.onClick}
+    >
+      <Icon size='32px' color={color} name={icon} />
+      <Display>
+        <DisplayName>{displayName}</DisplayName>
+        <Rate>
+          {fiatToString({
+            value: props.rates[coin][fiat].last,
+            unit: fiat
+          })}
+          <span>+ xx.x%</span>
+        </Rate>
+      </Display>
+      <Icon name='chevron-right' size='32px' color='grey600' />
+    </DisplayContainer>
+  )
+}
+
+export default CryptoItem

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/index.tsx

@@ -1,3 +1,7 @@
+import { Icon } from 'blockchain-info-components'
+import React from 'react'
+import styled from 'styled-components'
+
 import {
   CoinType,
   SBPairType,
@@ -9,10 +13,8 @@ import {
   getCoinFromPair,
   getFiatFromPair
 } from 'data/components/simpleBuy/model'
-import { Icon, Text } from 'blockchain-info-components'
 import { RatesType } from 'data/types'
-import React from 'react'
-import styled from 'styled-components'
+import { Title, Value } from 'components/Flyout'
 
 const DisplayContainer = styled.div<{
   coinType: SupportedCoinType
@@ -38,19 +40,6 @@ const Display = styled.div`
   font-weight: 500;
   color: ${props => props.theme.grey800};
 `
-const DisplayName = styled(Text)`
-  font-weight: 600;
-`
-
-const Rate = styled(Text)`
-  font-size: 14px;
-  font-weight: 500;
-  margin-top: 4px;
-  color: ${props => props.theme.grey600} !important;
-  > span {
-    color: ${props => props.theme.green500};
-  }
-`
 
 export type Props = {
   onClick: (string) => void
@@ -76,14 +65,13 @@ const CryptoItem: React.FC<Props> = props => {
     >
       <Icon size='32px' color={color} name={icon} />
       <Display>
-        <DisplayName>{displayName}</DisplayName>
-        <Rate>
+        <Value>{displayName}</Value>
+        <Title>
           {fiatToString({
             value: props.rates[coin][fiat].last,
             unit: fiat
           })}
-          <span>+ xx.x%</span>
-        </Rate>
+        </Title>
       </Display>
       <Icon name='chevron-right' size='32px' color='grey600' />
     </DisplayContainer>

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/index.tsx

@@ -27,11 +27,7 @@ const TopText = styled(Text)`
 const SubTitleText = styled(Text)`
   margin-top: 0;
 `
-const CloseIcon = styled(Icon)`
-  position: absolute;
-  top: 28px;
-  right: 28px;
-`
+
 export type Props = OwnProps & SuccessStateType
 
 const CryptoSelector: React.FC<InjectedFormProps<{}, Props> &
@@ -49,20 +45,20 @@ const CryptoSelector: React.FC<InjectedFormProps<{}, Props> &
     <Wrapper>
       <Form>
         <FlyoutWrapper>
-          <CloseIcon
-            cursor
-            data-e2e='sbCloseModalIcon'
-            name='close'
-            size='16px'
-            color='grey600'
-            role='button'
-            onClick={props.handleClose}
-          />
           <TopText color='grey800' size='20px' weight={600}>
             <FormattedMessage
               id='modals.simplebuy.cryptoselect'
               defaultMessage='Buy with Cash or Card'
             />
+            <Icon
+              cursor
+              data-e2e='sbCloseModalIcon'
+              name='close'
+              size='20px'
+              color='grey600'
+              role='button'
+              onClick={props.handleClose}
+            />
           </TopText>
           <SubTitleText color='grey600' weight={500}>
             <FormattedMessage

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/index.tsx

@@ -7,7 +7,6 @@ import {
   RemoteDataType,
   SBCardType,
   SBPairType,
-  SBPaymentMethodsType,
   SupportedCoinsType
 } from 'core/types'
 import { connect, ConnectedProps } from 'react-redux'
@@ -43,6 +42,7 @@ const mapStateToProps = (state: RootState): LinkStatePropsType => ({
 })
 
 export const mapDispatchToProps = (dispatch: Dispatch) => ({
+  analyticsActions: bindActionCreators(actions.analytics, dispatch),
   formActions: bindActionCreators(actions.form, dispatch),
   simpleBuyActions: bindActionCreators(actions.components.simpleBuy, dispatch)
 })
@@ -56,7 +56,6 @@ export type SuccessStateType = {
   cards: Array<SBCardType>
   eligibility: FiatEligibleType
   pairs: Array<SBPairType>
-  paymentMethods: SBPaymentMethodsType
   rates: { [key in CoinType]: RatesType }
   supportedCoins: SupportedCoinsType
 }

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/template.success.tsx

@@ -1,12 +1,25 @@
+import React, { useEffect } from 'react'
+
 import { LinkStatePropsType, Props as OwnProps, SuccessStateType } from '.'
 import CryptoSelector from './CryptoSelector'
-import React from 'react'
 import Unsupported from './template.unsupported'
 
 const Success: React.FC<Props> = props => {
-  return props.pairs.length &&
-    props.eligibility.eligible &&
-    props.fiatCurrency ? (
+  const isUserEligible =
+    props.pairs.length && props.eligibility.eligible && props.fiatCurrency
+
+  useEffect(() => {
+    props.analyticsActions.logEvent([
+      'IS_USER_SB_ELIGIBLE',
+      JSON.stringify({
+        pairs: props.pairs,
+        eligibility: props.eligibility,
+        doesWalletConsiderUserEligible: !!isUserEligible
+      })
+    ])
+  }, [])
+
+  return isUserEligible ? (
     <CryptoSelector {...props} />
   ) : (
     <Unsupported {...props} />