feat: improved component for render payments

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

@@ -288,6 +288,7 @@ type MessagesType = {
   'components.txlistitem.watchonly': 'Non-Spendable'
   'copy.address': 'Address'
   'copy.amount': 'Amount'
+  'copy.available': 'Available'
   'copy.balance': 'Balance'
   'copy.date': 'Date'
   'copy.failed': 'Failed'

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

@@ -8,6 +8,7 @@ import {
   SBAccountType,
   SBBalancesType,
   SBCardType,
+  SBOrderActionType,
   SBOrderType,
   SBPairType,
   SBPaymentMethodsType,
@@ -373,9 +374,13 @@ export const initializeBillingAddress = () => ({
   type: AT.INITIALIZE_BILLING_ADDRESS
 })
 
-export const initializeCheckout = (orderType: 'BUY' | 'SELL') => ({
+export const initializeCheckout = (
+  orderType: SBOrderActionType,
+  amount?: string
+) => ({
   type: AT.INITIALIZE_CHECKOUT,
-  orderType
+  orderType,
+  amount
 })
 
 export const pollSBBalances = () => ({
@@ -407,7 +412,6 @@ const getPayloadObjectForStep = (payload: StepActionsPayload) => {
       return {
         step: payload.step,
         cryptoCurrency: payload.cryptoCurrency,
-        defaultMethod: payload.defaultMethod,
         fiatCurrency: payload.fiatCurrency,
         order: payload.order,
         pair: payload.pair
@@ -416,7 +420,6 @@ const getPayloadObjectForStep = (payload: StepActionsPayload) => {
       return {
         step: payload.step,
         cryptoCurrency: payload.cryptoCurrency,
-        defaultMethod: payload.defaultMethod,
         fiatCurrency: payload.fiatCurrency,
         method: payload.method,
         pair: payload.pair
@@ -430,7 +433,8 @@ const getPayloadObjectForStep = (payload: StepActionsPayload) => {
     case 'TRANSFER_DETAILS':
       return {
         step: payload.step,
-        fiatCurrency: payload.fiatCurrency
+        fiatCurrency: payload.fiatCurrency,
+        displayBack: payload.displayBack
       }
     case 'CHECKOUT_CONFIRM':
     case 'ORDER_SUMMARY':

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

@@ -4,6 +4,7 @@ import {
   FiatType,
   FiatTypeEnum,
   SBCardType,
+  SBOrderActionType,
   SBOrderType,
   SBPairsType,
   SBQuoteType
@@ -30,7 +31,7 @@ export const splitPair = (
   return pair.split('-') as [FiatType | CoinType, '-', FiatType | CoinType]
 }
 
-export const getOrderType = (pair: SBPairsType): 'BUY' | 'SELL' => {
+export const getOrderType = (pair: SBPairsType): SBOrderActionType => {
   return splitPair(pair)[0] in FiatTypeEnum ? 'SELL' : 'BUY'
 }
 

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

@@ -8,8 +8,8 @@ const INITIAL_STATE: SimpleBuyState = {
   card: Remote.NotAsked,
   cardId: undefined,
   cards: Remote.NotAsked,
+  displayBack: false,
   cryptoCurrency: undefined,
-  defaultMethod: undefined,
   everypay3DS: Remote.NotAsked,
   fiatCurrency: undefined,
   fiatEligible: Remote.NotAsked,
@@ -67,7 +67,6 @@ export function simpleBuyReducer (
         ...state,
         account: Remote.NotAsked,
         cardId: undefined,
-        defaultMethod: undefined,
         order: undefined,
         pairs: Remote.NotAsked,
         quote: Remote.NotAsked,
@@ -241,7 +240,6 @@ export function simpleBuyReducer (
           return {
             ...state,
             cryptoCurrency: action.payload.cryptoCurrency,
-            defaultMethod: action.payload.defaultMethod,
             fiatCurrency: action.payload.fiatCurrency,
             step: action.payload.step,
             pair: action.payload.pair,
@@ -253,14 +251,12 @@ export function simpleBuyReducer (
             ...state,
             cryptoCurrency: action.payload.cryptoCurrency,
             fiatCurrency: action.payload.fiatCurrency,
-            step: action.payload.step,
-            order: undefined
+            step: action.payload.step
           }
         case 'PAYMENT_METHODS':
           return {
             ...state,
             cryptoCurrency: action.payload.cryptoCurrency,
-            defaultMethod: action.payload.defaultMethod,
             fiatCurrency: action.payload.fiatCurrency,
             step: action.payload.step,
             order: action.payload.order
@@ -278,7 +274,8 @@ export function simpleBuyReducer (
           return {
             ...state,
             step: action.payload.step,
-            fiatCurrency: action.payload.fiatCurrency
+            fiatCurrency: action.payload.fiatCurrency,
+            displayBack: action.payload.displayBack
           }
         default: {
           return {

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

@@ -30,6 +30,7 @@ import {
   NO_PAIR_SELECTED
 } from './model'
 import { errorHandler } from 'blockchain-wallet-v4/src/utils'
+import { Remote } from 'blockchain-wallet-v4/src'
 import {
   SBAddCardErrorType,
   SBAddCardFormValuesType,
@@ -458,7 +459,12 @@ export default ({
         )
       }
       yield call(createUser)
-      yield put(A.fetchSBPaymentMethodsLoading())
+
+      // Only show Loading if NotAsked
+      const sbMethodsR = S.getSBPaymentMethods(yield select())
+      if (Remote.NotAsked.is(sbMethodsR))
+        yield put(A.fetchSBPaymentMethodsLoading())
+
       const methods = yield call(
         api.getSBPaymentMethods,
         currency,
@@ -535,7 +541,8 @@ export default ({
   }
 
   const initializeCheckout = function * ({
-    orderType
+    orderType,
+    amount
   }: ReturnType<typeof A.initializeCheckout>) {
     try {
       yield call(createUser)
@@ -548,7 +555,8 @@ export default ({
 
       yield put(
         actions.form.initialize('simpleBuyCheckout', {
-          orderType
+          orderType,
+          amount
         } as SBCheckoutFormValuesType)
       )
     } catch (e) {

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

@@ -1,3 +1,5 @@
+import { ExtractSuccess, SBPaymentMethodType } from 'core/types'
+import { head, lift } from 'ramda'
 import { RootState } from 'data/rootReducer'
 
 export const getEverypay3DSDetails = (state: RootState) =>
@@ -9,11 +11,56 @@ export const getSBAccount = (state: RootState) =>
 export const getCryptoCurrency = (state: RootState) =>
   state.components.simpleBuy.cryptoCurrency
 
+export const getDisplayBack = (state: RootState) =>
+  state.components.simpleBuy.displayBack
+
 export const getFiatCurrency = (state: RootState) =>
   state.components.simpleBuy.fiatCurrency || state.preferences.sbFiatCurrency
 
-export const getDefaultMethod = (state: RootState) =>
-  state.components.simpleBuy.defaultMethod
+export const getDefaultPaymentMethod = (state: RootState) => {
+  const ordersR = getSBOrders(state)
+  const sbCardsR = getSBCards(state)
+  const sbMethodsR = getSBPaymentMethods(state)
+
+  const transform = (
+    orders: ExtractSuccess<typeof ordersR>,
+    sbCards: ExtractSuccess<typeof sbCardsR>,
+    sbMethods: ExtractSuccess<typeof sbMethodsR>
+  ): SBPaymentMethodType | undefined => {
+    const lastOrder = head(orders)
+    if (!lastOrder) return undefined
+
+    const methodsOfType = sbMethods.methods.filter(
+      method => method.type === lastOrder.paymentType
+    )
+
+    switch (lastOrder.paymentType) {
+      case 'PAYMENT_CARD':
+        const method = head(methodsOfType)
+        if (!method) return
+        const sbCard = sbCards.find(
+          value => value.id === lastOrder.paymentMethodId
+        )
+        const card = sbCard?.card || undefined
+
+        return {
+          ...method,
+          type: 'USER_CARD',
+          card
+        }
+      case 'FUNDS':
+        return methodsOfType.find(
+          method => method.currency === lastOrder.inputCurrency
+        )
+      case 'BANK_ACCOUNT':
+      case 'USER_CARD':
+      case undefined:
+        return undefined
+    }
+  }
+
+  return lift(transform)(ordersR, sbCardsR, sbMethodsR)
+}
 
 export const getSBBalances = (state: RootState) =>
   state.components.simpleBuy.balances

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

@@ -9,6 +9,7 @@ import {
   SBAccountType,
   SBBalancesType,
   SBCardType,
+  SBOrderActionType,
   SBOrderType,
   SBPairType,
   SBPaymentMethodsType,
@@ -34,7 +35,7 @@ export type SBAddCardErrorType =
 export type SBBillingAddressFormValuesType = NabuAddressType
 export type SBCheckoutFormValuesType = {
   amount: string
-  orderType: 'BUY' | 'SELL'
+  orderType: SBOrderActionType
 }
 export type SBCurrencySelectFormType = {
   search: string
@@ -70,7 +71,7 @@ export type SimpleBuyState = {
   cardId: undefined | string
   cards: RemoteDataType<string, Array<SBCardType>>
   cryptoCurrency: undefined | CoinType
-  defaultMethod: undefined | SBPaymentMethodType
+  displayBack: boolean
   everypay3DS: RemoteDataType<string, Everypay3DSResponseType>
   fiatCurrency: undefined | FiatType
   fiatEligible: RemoteDataType<string, FiatEligibleType>
@@ -290,7 +291,6 @@ export type StepActionsPayload =
     }
   | {
       cryptoCurrency?: CoinType
-      defaultMethod?: SBPaymentMethodType
       fiatCurrency: FiatType
       method?: SBPaymentMethodType
       order?: SBOrderType
@@ -303,12 +303,12 @@ export type StepActionsPayload =
       step: 'CRYPTO_SELECTION'
     }
   | {
+      displayBack: boolean
       fiatCurrency: FiatType
       step: 'TRANSFER_DETAILS'
     }
   | {
       cryptoCurrency: CoinType
-      defaultMethod?: SBPaymentMethodType
       fiatCurrency: FiatType
       order?: SBOrderType
       pair: SBPairType

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

@@ -3,7 +3,7 @@ import { bindActionCreators, Dispatch } from 'redux'
 import { connect, ConnectedProps } from 'react-redux'
 import { getData } from './selectors'
 import { RootState } from 'data/rootReducer'
-import { SBPairType, SupportedWalletCurrenciesType } from 'core/types'
+import { SBPairType } from 'core/types'
 import React, { PureComponent } from 'react'
 import Success from './template.success'
 
@@ -29,8 +29,7 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
 const connector = connect(mapStateToProps, mapDispatchToProps)
 
 export type OwnProps = {
-  onClick: (string) => void
-  supportedCoins: SupportedWalletCurrenciesType
+  onClick?: (string) => void
   value: SBPairType
 }
 export type SuccessStateType = ReturnType<typeof getData>['data']

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/CryptoSelector/CryptoItem/selectors.ts

@@ -10,9 +10,16 @@ export const getData = (state: RootState, ownProps: OwnProps) => {
   const coin = getCoinFromPair(ownProps.value.pair)
   const ratesR = selectors.core.data.misc.getRatesSelector(coin, state)
   const fiatCurrency = selectors.components.simpleBuy.getFiatCurrency(state)
+  const supportedCoinsR = selectors.core.walletOptions.getSupportedCoins(state)
 
-  return lift((rates: ExtractSuccess<typeof ratesR>) => ({
-    fiatCurrency,
-    rates
-  }))(ratesR)
+  return lift(
+    (
+      rates: ExtractSuccess<typeof ratesR>,
+      supportedCoins: ExtractSuccess<typeof supportedCoinsR>
+    ) => ({
+      fiatCurrency,
+      rates,
+      supportedCoins
+    })
+  )(ratesR, supportedCoinsR)
 }

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

@@ -30,13 +30,13 @@ const DisplayContainer = styled.div<{
     background-color: ${props => props.theme.grey100};
   }
 `
-const Display = styled.div`
+const Display = styled.div<{ canClick: boolean }>`
   position: relative;
   display: flex;
   flex-direction: column;
   margin-left: 12px;
   width: 100%;
-  cursor: pointer;
+  cursor: ${props => (props.canClick ? 'pointer' : 'initial')};
   font-size: 16px;
   font-weight: 500;
   color: ${props => props.theme.grey800};
@@ -65,7 +65,7 @@ const Success: React.FC<Props> = props => {
       onClick={props.onClick}
     >
       <Icon size='32px' color={color} name={icon} />
-      <Display>
+      <Display canClick={!!props.onClick}>
         <Value style={{ marginTop: '0px' }}>{displayName}</Value>
         <DisplayTitle>
           {fiatToString({
@@ -75,7 +75,9 @@ const Success: React.FC<Props> = props => {
           <PriceMovement {...props} />
         </DisplayTitle>
       </Display>
-      <Icon name='chevron-right' size='32px' color='grey600' />
+      {props.onClick && (
+        <Icon name='chevron-right' size='32px' color='grey600' />
+      )}
     </DisplayContainer>
   )
 }

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

@@ -72,7 +72,6 @@ const CryptoSelector: React.FC<InjectedFormProps<{}, Props> &
             <CryptoItem
               key={index}
               value={value}
-              supportedCoins={props.supportedCoins}
               onClick={() => handleSubmit(value as SBPairType)}
             />
           ))}

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CryptoSelection/selectors.ts

@@ -1,24 +1,21 @@
-import { ExtractSuccess, SupportedWalletCurrenciesType } from 'core/types'
+import { ExtractSuccess } from 'core/types'
 import { lift } from 'ramda'
 import { selectors } from 'data'
 
 export const getData = state => {
   const eligibilityR = selectors.components.simpleBuy.getSBFiatEligible(state)
   const pairsR = selectors.components.simpleBuy.getSBPairs(state)
-  const supportedCoinsR = selectors.core.walletOptions.getSupportedCoins(state)
   const userDataR = selectors.modules.profile.getUserData(state)
 
   return lift(
     (
       eligibility: ExtractSuccess<typeof eligibilityR>,
       pairs: ExtractSuccess<typeof pairsR>,
-      supportedCoins: SupportedWalletCurrenciesType,
       userData: ExtractSuccess<typeof userDataR>
     ) => ({
       eligibility,
       pairs,
-      supportedCoins,
       userData
     })
-  )(eligibilityR, pairsR, supportedCoinsR, userDataR)
+  )(eligibilityR, pairsR, userDataR)
 }