diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts index d85d531f89b..54ccb41dc00 100644 --- a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts +++ b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts @@ -1141,6 +1141,9 @@ type MessagesType = { 'modals.simplebuy.cryptoselect': 'Buy with Cash or Card' 'modals.simplebuy.paymentmethods': 'Payment Methods' 'modals.simplebuy.depositcash_description': 'Send funds directly from your bank to your Blockchain.com Wallet. Once we receive the manual transfer, use that cash to buy crypto.' + 'modals.simplebuy.card_limit': '{card} Limit' + 'modals.simplebuy.card_expire': 'Exp: {month}/{year}' + 'modals.simplebuy.instantly_buy': 'Instantly buy crypto with any Visa or Mastercard.' 'modals.simplebuy.selectcrypto': 'Select the crypto you want to buy.' 'modals.simplebuy.setupaccount': "Next, we'll set up your account." 'modals.simplebuy.success': 'Trade Complete' diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts index bb21c1a921d..f4455bf996e 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/actions.ts @@ -409,6 +409,7 @@ const getPayloadObjectForStep = (payload: StepActionsPayload) => { cryptoCurrency: payload.cryptoCurrency, defaultMethod: payload.defaultMethod, fiatCurrency: payload.fiatCurrency, + order: payload.order, pair: payload.pair } case 'ENTER_AMOUNT': diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts index 3480d0bf516..b6828b45eff 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts @@ -263,7 +263,7 @@ export function simpleBuyReducer ( defaultMethod: action.payload.defaultMethod, fiatCurrency: action.payload.fiatCurrency, step: action.payload.step, - order: undefined + order: action.payload.order } case '3DS_HANDLER': case 'CHECKOUT_CONFIRM': diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts index 8f9609371c5..0fb50b23f4c 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts @@ -303,6 +303,7 @@ export type StepActionsPayload = defaultMethod?: SBFormPaymentMethod fiatCurrency: FiatType method?: SBFormPaymentMethod + order?: SBOrderType pair: SBPairType step: 'ENTER_AMOUNT' } @@ -315,6 +316,7 @@ export type StepActionsPayload = cryptoCurrency: CoinType defaultMethod?: SBFormPaymentMethod fiatCurrency: FiatType + order?: SBOrderType pair: SBPairType step: 'PAYMENT_METHODS' } diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/AddCard/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/AddCard/index.tsx index 5a4345647bc..8ca430a3603 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/AddCard/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/AddCard/index.tsx @@ -1,5 +1,6 @@ import { actions, selectors } from 'data' import { bindActionCreators, Dispatch } from 'redux' +import { CoinType, SBPairType } from 'core/types' import { connect, ConnectedProps } from 'react-redux' import { getData } from './selectors' import { Remote } from 'core' @@ -49,7 +50,9 @@ const mapDispatchToProps = (dispatch: Dispatch): LinkDispatchPropsType => ({ const connector = connect(mapStateToProps, mapDispatchToProps) type OwnProps = { + cryptoCurrency?: CoinType handleClose: () => void + pair: SBPairType } type LinkDispatchPropsType = { simpleBuyActions: typeof actions.components.simpleBuy diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/AddCard/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/AddCard/template.success.tsx index 4caeac0acfe..450b78dc3f6 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/AddCard/template.success.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/AddCard/template.success.tsx @@ -65,7 +65,10 @@ const Success: React.FC & }) : props.simpleBuyActions.setStep({ fiatCurrency: props.fiatCurrency, - step: 'CRYPTO_SELECTION' + step: 'PAYMENT_METHODS', + pair: props.pair, + cryptoCurrency: props.cryptoCurrency || 'BTC', + order: props.order }) } /> diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/index.tsx index accef0ab7fb..5e67b1caf11 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/index.tsx @@ -42,7 +42,8 @@ class Checkout extends PureComponent { step: 'PAYMENT_METHODS', fiatCurrency, pair: this.props.pair, - cryptoCurrency: this.props.cryptoCurrency + cryptoCurrency: this.props.cryptoCurrency, + order: this.props.order }) } else if (formValues && this.props.method) { switch (this.props.method.type) { diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/index.tsx index 504b2496c7e..cec604b9652 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/index.tsx @@ -6,6 +6,7 @@ import { FiatType, RemoteDataType, SBCardType, + SBOrderType, SBPairType, SBPaymentMethodsType } from 'core/types' @@ -52,6 +53,7 @@ const connector = connect(mapStateToProps, mapDispatchToProps) export type OwnProps = { handleClose: () => void method: SBFormPaymentMethod + order?: SBOrderType pair: SBPairType } export type SuccessStateType = { diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/Payment/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/BankAccount/index.tsx similarity index 62% rename from packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/Payment/index.tsx rename to packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/BankAccount/index.tsx index 433ed750dee..57a59a22fc3 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/Payment/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/BankAccount/index.tsx @@ -1,8 +1,7 @@ -import { fiatToString } from 'core/exchange/currency' -import { FiatType, SBPaymentMethodType } from 'core/types' import { FormattedMessage } from 'react-intl' import { Icon } from 'blockchain-info-components' -import { Title, Value } from 'components/Flyout' +import { SBPaymentMethodType } from 'core/types' +import { Title } from 'components/Flyout' import React, { ReactElement } from 'react' import styled from 'styled-components' @@ -24,6 +23,7 @@ const Content = styled.div` display: flex; flex-direction: column; width: 100%; + margin-left: 16px; color: ${props => props.theme.grey800}; ` const DisplayIcon = styled.div` @@ -43,18 +43,6 @@ const DisplayTitle = styled(Title)` color: ${props => props.theme.textBlack}; width: 100%; ` -const MainValue = styled(Value)` - margin-top: 0; - text-align: right; - font-size: 16px; - color: ${props => props.theme.grey900}; -` -const SubValue = styled(Value)` - margin-top: 0; - color: ${props => props.theme.textBody}; - text-align: right; - font-size: 14px; -` type Props = { icon: ReactElement @@ -63,7 +51,7 @@ type Props = { value: SBPaymentMethodType } -const Payment: React.FC = ({ value, onClick, icon, text }) => ( +const BankAccount: React.FC = ({ value, onClick, icon, text }) => ( = ({ value, onClick, icon, text }) => ( {icon} {text} - - {fiatToString({ - value: value.limits.max, - unit: String(value.currency) as FiatType - })} - - {value.limits.min && ( - - {fiatToString({ - value: value.limits.min, - unit: String(value.currency) as FiatType - })} - - )} - {value.type === 'BANK_ACCOUNT' && ( + <FormattedMessage id='modals.simplebuy.depositcash_description' defaultMessage='Send funds directly from your bank to your Blockchain.com Wallet. Once we receive the manual transfer, use that cash to buy crypto.' /> - )} + - + ) -export default Payment +export default BankAccount diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/Card/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/Card/index.tsx index af1ec360e05..2a47a9ae9bf 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/Card/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/Card/index.tsx @@ -1,5 +1,6 @@ import { fiatToString } from 'core/exchange/currency' import { FiatType, SBPaymentMethodType } from 'core/types' +import { FormattedMessage } from 'react-intl' import { Title, Value } from 'components/Flyout' import React, { ReactElement } from 'react' import styled from 'styled-components' @@ -17,12 +18,13 @@ const DisplayContainer = styled.div` background-color: ${props => props.theme.grey100}; } ` -const DisplayMoney = styled.div` +const Display = styled.div` position: relative; display: flex; flex-direction: column; - width: 120px; + width: 230px; color: ${props => props.theme.grey800}; + margin-left: 16px; ` const DisplayIcon = styled.div` position: relative; @@ -41,6 +43,13 @@ const DisplayTitle = styled(Title)` color: ${props => props.theme.textBlack}; width: 100%; ` +const DisplaySubTitle = styled(Title)` + align-items: left; + font-weight: 500; + font-size: 14px; + color: ${props => props.theme.textBody}; + width: 100%; +` const MainValue = styled(Value)` margin-top: 0; text-align: right; @@ -49,11 +58,17 @@ const MainValue = styled(Value)` ` const SubValue = styled(Value)` margin-top: 0; + font-weight: 500; color: ${props => props.theme.textBody}; text-align: right; font-size: 14px; ` +const DisplayCardDetails = styled.div` + width: 130px; + text-align: right; +` + type Props = { icon: ReactElement onClick: (string) => void @@ -68,23 +83,36 @@ const Card: React.FC = ({ value, onClick, icon, text }) => ( onClick={onClick} > {icon} - {text} - - - {fiatToString({ - value: value.limits.max, - unit: String(value.currency) as FiatType - })} - - {value.limits.min && ( + + {text} + + + + + {value.card && ( + + {value.card.number} - {fiatToString({ - value: value.limits.min, - unit: String(value.currency) as FiatType - })} + - )} - + + )} ) diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/PaymentCard/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/PaymentCard/index.tsx new file mode 100644 index 00000000000..74c503e8e00 --- /dev/null +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/PaymentCard/index.tsx @@ -0,0 +1,93 @@ +import { fiatToString } from 'core/exchange/currency' +import { FiatType, SBPaymentMethodType } from 'core/types' +import { FormattedMessage } from 'react-intl' +import { Icon } from 'blockchain-info-components' +import { Title } from 'components/Flyout' +import React, { ReactElement } from 'react' +import styled from 'styled-components' + +const DisplayContainer = styled.div` + display: flex; + width: 100%; + align-items: center; + box-sizing: border-box; + padding: 16px 40px; + flex-direction: row; + cursor: pointer; + border-bottom: 1px solid ${props => props.theme.grey000}; + &hover { + background-color: ${props => props.theme.grey100}; + } +` +const Content = styled.div` + position: relative; + display: flex; + flex-direction: column; + color: ${props => props.theme.grey800}; + margin-left: 16px; + min-width: 336px; +` +const DisplayIcon = styled.div` + position: relative; + display: flex; + flex-direction: column; + font-size: 16px; + font-weight: 500; + max-width: 32px; + color: ${props => props.theme.grey800}; +` +const DisplayTitle = styled(Title)` + align-items: left; + font-weight: 600; + font-size: 16px; + display: flex; + flex-direction: column; + color: ${props => props.theme.textBlack}; + width: 100%; +` +const SubTitle = styled(Title)` + color: ${props => props.theme.textBody}; + margin-top: 5px; + line-height: 21px; +` + +type Props = { + icon: ReactElement + onClick: (string) => void + text: string + value: SBPaymentMethodType +} + +const PaymentCard: React.FC = ({ value, onClick, icon, text }) => ( + + {icon} + + {text} + + + + + + + + + +) + +export default PaymentCard diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx index 53c2c40ce8e..53dc06f2d32 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx @@ -9,9 +9,10 @@ import { Icon, Text } from 'blockchain-info-components' import { Props as OwnProps, SuccessStateType } from '../index' import { SBFormPaymentMethod } from 'data/components/simpleBuy/types' import { SBPaymentMethodType } from 'core/types' +import BankAccount from './BankAccount' import Card from './Card' import Fund from './Fund' -import Payment from './Payment' +import PaymentCard from './PaymentCard' import React, { PureComponent, ReactElement } from 'react' import styled from 'styled-components' @@ -132,9 +133,17 @@ class Payments extends PureComponent & Props> { value })) + const defaultCardMethod = this.props.paymentMethods.methods.find( + m => m.type === 'PAYMENT_CARD' + ) + const funds = defaultMethods.filter(method => method.value.type === 'FUNDS') - const nonFundsMethods = defaultMethods.filter( - method => method.value.type !== 'FUNDS' + + const paymentCard = defaultMethods.find( + method => method.value.type === 'PAYMENT_CARD' + ) + const bankAccount = defaultMethods.find( + method => method.value.type === 'BANK_ACCOUNT' ) const cardMethods = availableCards.map(card => ({ @@ -148,24 +157,13 @@ class Payments extends PureComponent & Props> { card: card.card, type: 'USER_CARD', currency: card.currency, - limits: card.limits ? card.limits : { min: '1000', max: '500000' } + limits: + defaultCardMethod && defaultCardMethod.limits + ? defaultCardMethod.limits + : { min: '1000', max: '500000' } } as SBPaymentMethodType })) - // card?: SBCard, - // currency: FiatCurrenciesType, - // limits: { - // max: string - // min: string - // }, - // subTypes?: [] | [CardNameType], - // type: SBPaymentTypes - - // eslint-disable-next-line - console.log('cardMethods', cardMethods) - // eslint-disable-next-line - console.log(defaultMethods) - return (
@@ -214,15 +212,31 @@ class Payments extends PureComponent & Props> { onClick={() => this.handleSubmit(cardMethod.value)} /> ))} - {nonFundsMethods && - nonFundsMethods.map((payment, index) => ( - this.handleSubmit(payment.value)} - /> - ))} + {paymentCard && ( + + this.props.simpleBuyActions.setStep({ + step: 'ADD_CARD' + }) + } + /> + )} + {/* TODO - this might redirect to separate STEP */} + {bankAccount && ( + + this.props.simpleBuyActions.setStep({ + step: 'ADD_CARD' + }) + } + /> + )}
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/index.tsx index 7b5c7826472..1e2334931e0 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/index.tsx @@ -1,7 +1,7 @@ import { actions, selectors } from 'data' import { bindActionCreators, Dispatch } from 'redux' import { connect, ConnectedProps } from 'react-redux' -import { FiatType, RemoteDataType, SBPairType } from 'core/types' +import { FiatType, RemoteDataType, SBOrderType, SBPairType } from 'core/types' import { getData } from './selectors' import { RootState } from 'data/rootReducer' import Failure from './template.failure' @@ -44,6 +44,7 @@ const connector = connect(mapStateToProps, mapDispatchToProps) export type OwnProps = { handleClose: () => void + order: SBOrderType pair: SBPairType } diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx index 235a3314498..4cf24768fb6 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx @@ -1,9 +1,14 @@ import { actions, selectors } from 'data' import { bindActionCreators, compose, Dispatch } from 'redux' +import { + CoinType, + SBOrderType, + SBPairType, + SBPaymentMethodType +} from 'core/types' import { connect } from 'react-redux' import { ModalPropsType } from '../types' import { RootState } from 'data/rootReducer' -import { SBOrderType, SBPairType, SBPaymentMethodType } from 'core/types' import { SimpleBuyStepType } from 'data/types' import AddCard from './AddCard' import BillingAddress from './BillingAddress' @@ -130,7 +135,8 @@ const mapStateToProps = (state: RootState) => ({ cardId: selectors.components.simpleBuy.getSBCardId(state), pair: selectors.components.simpleBuy.getSBPair(state), method: selectors.components.simpleBuy.getSBPaymentMethod(state), - order: selectors.components.simpleBuy.getSBOrder(state) + order: selectors.components.simpleBuy.getSBOrder(state), + cryptoCurrency: selectors.components.simpleBuy.getCryptoCurrency(state) }) const mapDispatchToProps = (dispatch: Dispatch): LinkDispatchPropsType => ({ @@ -168,15 +174,18 @@ type LinkStatePropsType = } | { cardId?: string + cryptoCurrency?: CoinType pair: SBPairType step: 'ADD_CARD' } | { method: SBPaymentMethodType + order?: SBOrderType pair: SBPairType step: 'ENTER_AMOUNT' } | { + order: SBOrderType pair: SBPairType step: 'PAYMENT_METHODS' }