diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json b/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json index 0150c1d097d..871555e517f 100644 --- a/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json +++ b/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json @@ -837,7 +837,7 @@ "modals.onboarding.linktoexchangeaccount.loading.waitingbody": "If a new browser tab did not open, try clicking the button below.", "modals.onboarding.linktoexchangeaccount.na.connectnow": "Connect Now", "modals.onboarding.linktoexchangeaccount.na.left.point1-2": "Access More Cryptos", - "modals.onboarding.linktoexchangeaccount.na.left.point2-1": "Deposit & Withdraw
Euros/Dollars", + "modals.onboarding.linktoexchangeaccount.na.left.point2-1": "Deposit & WithdrawEuros/Dollars", "modals.onboarding.linktoexchangeaccount.na.left.point3-1": "Lightning Fast Trading", "modals.onboarding.linktoexchangeaccount.na.left.point4-1": "Built by the Pros", "modals.onboarding.linktoexchangeaccount.na.resendemail": "Resend Email", @@ -1112,6 +1112,7 @@ "modals.simplebuy.save_my_card": "Save My Card", "modals.simplebuy.selectcurrency": "Select Your Currency", "modals.simplebuy.cryptoselect": "Buy with Cash or Card", + "modals.simplebuy.paymentmethods": "Payment Methods", "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/assets/locales/index.d.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts index 7f1018b9d52..a2a30a23014 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 @@ -1138,6 +1138,7 @@ type MessagesType = { 'modals.simplebuy.save_my_card': 'Save My Card' 'modals.simplebuy.selectcurrency': 'Select Your Currency' 'modals.simplebuy.cryptoselect': 'Buy with Cash or Card' + 'modals.simplebuy.paymentmethods': 'Payment Methods' '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 031db9a70e9..7742412f105 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 @@ -373,14 +373,8 @@ export const initializeBillingAddress = () => ({ type: AT.INITIALIZE_BILLING_ADDRESS }) -export const initializeCheckout = ( - paymentMethods: SBPaymentMethodsType, - cards: Array, - orderType: 'BUY' | 'SELL' -) => ({ +export const initializeCheckout = (orderType: 'BUY' | 'SELL') => ({ type: AT.INITIALIZE_CHECKOUT, - paymentMethods, - cards, orderType }) 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 276b02ab023..72c5ec54943 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 @@ -13,6 +13,7 @@ const INITIAL_STATE: SimpleBuyState = { everypay3DS: Remote.NotAsked, fiatCurrency: undefined, fiatEligible: Remote.NotAsked, + method: undefined, methods: Remote.NotAsked, order: undefined, orders: Remote.NotAsked, diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts index 0db12e44fbf..ba5601e6d38 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts @@ -34,8 +34,7 @@ import { SBAddCardErrorType, SBAddCardFormValuesType, SBBillingAddressFormValuesType, - SBCheckoutFormValuesType, - SBFormPaymentMethod + SBCheckoutFormValuesType } from './types' import { UserDataType } from 'data/modules/types' import moment from 'moment' @@ -531,45 +530,19 @@ export default ({ } const initializeCheckout = function * ({ - paymentMethods, - cards, orderType }: ReturnType) { try { yield call(createUser) yield call(waitForUserData) - 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 cardMethod = paymentMethods.methods.find( - method => method.type === 'PAYMENT_CARD' - ) - const activeCard = cards.find(card => card.state === 'ACTIVE') - - const method: SBFormPaymentMethod = - defaultMethod || - (activeCard - ? cardMethod - ? { - ...activeCard, - limits: cardMethod.limits, - type: 'USER_CARD' - } - : paymentMethods.methods[0] - : paymentMethods.methods[0]) - yield put( actions.form.initialize('simpleBuyCheckout', { - method: isSimpleBuyCCInvited - ? method - : paymentMethods.methods.find( - method => method.type === 'BANK_ACCOUNT' - ), orderType } as SBCheckoutFormValuesType) ) diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts index ce2ae9e4518..5fffb78b319 100644 --- a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts +++ b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/selectors.ts @@ -34,6 +34,9 @@ export const getSBPairs = (state: RootState) => state.components.simpleBuy.pairs export const getSBPair = (state: RootState) => state.components.simpleBuy.pair +export const getSBPaymentMethod = (state: RootState) => + state.components.simpleBuy.method + export const getSBPaymentMethods = (state: RootState) => state.components.simpleBuy.methods 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 4f180fbf013..1ca11db4174 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 @@ -34,7 +34,6 @@ export type SBAddCardErrorType = export type SBBillingAddressFormValuesType = NabuAddressType export type SBCheckoutFormValuesType = { amount: string - method?: SBFormPaymentMethod orderType: 'BUY' | 'SELL' } export type SBCurrencySelectFormType = { @@ -81,6 +80,7 @@ export type SimpleBuyState = { everypay3DS: RemoteDataType fiatCurrency: undefined | FiatType fiatEligible: RemoteDataType + method: undefined | SBFormPaymentMethod methods: RemoteDataType order: undefined | SBOrderType orders: RemoteDataType> @@ -311,8 +311,8 @@ export type StepActionsPayload = step: 'CRYPTO_SELECTION' } | { - cryptoCurrency: CoinType - defaultMethod: SBFormPaymentMethod + cryptoCurrency?: CoinType + defaultMethod?: SBFormPaymentMethod fiatCurrency: FiatType pair: SBPairType step: 'PAYMENT_METHODS' diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/MethodSelect/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/MethodSelect/index.tsx index 416f55ec90f..e4e08d4c6cf 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/MethodSelect/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/MethodSelect/index.tsx @@ -8,7 +8,7 @@ import { Field } from 'redux-form' import { getFiatFromPair } from 'data/components/simpleBuy/model' import { Icon, Text } from 'blockchain-info-components' import { Props } from '../template.success' -import { SBCheckoutFormValuesType } from 'data/types' +import { SBFormPaymentMethod } from 'data/types' import { SelectBox } from 'components/Form' import React, { PureComponent, ReactElement } from 'react' import styled from 'styled-components' @@ -261,6 +261,6 @@ class MethodSelect extends PureComponent { } } -type ElementValueType = Exclude +type ElementValueType = Exclude export default MethodSelect 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 82c25d24b4b..b3f0b35cc85 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 @@ -24,20 +24,13 @@ import Success from './template.success' class Checkout extends PureComponent { componentDidMount () { - this.props.simpleBuyActions.initializeCheckout( - this.props.paymentMethods, - this.props.cards, - 'BUY' - ) + this.props.simpleBuyActions.initializeCheckout('BUY') } handleSubmit = () => { // if the user is < tier 2 go to kyc but save order info // if the user is tier 2 try to submit order, let BE fail const { formValues, userData } = this.props.data.getOrElse({ - formValues: { - method: { limits: { min: '0', max: '0' }, type: 'BANK_ACCOUNT' } - } as SBCheckoutFormValuesType, userData: { tiers: { current: 0, next: 0, selected: 0 } } as UserDataType } as SuccessStateType) @@ -51,19 +44,26 @@ class Checkout extends PureComponent { ) this.props.simpleBuyActions.createSBOrder( undefined, - formValues?.method?.type as SBPaymentMethodType['type'] + this.props.method.type as SBPaymentMethodType['type'] ) - } else if (formValues && formValues.method) { - // eslint-disable-next-line - console.log('here we gooo', formValues.method.type) - switch (formValues.method.type) { + } else if (formValues && !this.props.method) { + const fiatCurrency = this.props.fiatCurrency || 'USD' + this.props.simpleBuyActions.setStep({ + step: 'PAYMENT_METHODS', + fiatCurrency, + pair: this.props.pair + }) + } else if (formValues && this.props.method) { + switch (this.props.method.type) { case 'PAYMENT_CARD': this.props.simpleBuyActions.setStep({ step: 'ADD_CARD' }) break case 'USER_CARD': - this.props.simpleBuyActions.createSBOrder(formValues.method.id) + // TODO figure out id + // this.props.simpleBuyActions.createSBOrder(formValues.method.id) + this.props.simpleBuyActions.createSBOrder() break case 'BANK_ACCOUNT': this.props.simpleBuyActions.createSBOrder() diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx index ae3fe960208..f8036c93112 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx @@ -20,7 +20,6 @@ import { SBCheckoutFormValuesType } from 'data/types' import ActionButton from './ActionButton' import Currencies from 'blockchain-wallet-v4/src/exchange/currencies' import Failure from '../template.failure' -import MethodSelect from './MethodSelect' import React from 'react' import styled from 'styled-components' @@ -126,7 +125,7 @@ const Success: React.FC & Props> = props => { const prop = amtError === 'ABOVE_MAX' ? 'max' : 'min' const value = convertStandardToBase( 'FIAT', - getMaxMin(props.pair, prop, props.formValues) + getMaxMin(props.pair, prop, props.formValues, props.method) ) props.simpleBuyActions.handleSBSuggestedAmountClick(value) } @@ -177,7 +176,12 @@ const Success: React.FC & Props> = props => { values={{ value: fiatToString({ unit: fiatCurrency, - value: getMaxMin(props.pair, 'max', props.formValues), + value: getMaxMin( + props.pair, + 'max', + props.formValues, + props.method + ), digits: 0 }), orderType: @@ -191,7 +195,12 @@ const Success: React.FC & Props> = props => { values={{ value: fiatToString({ unit: fiatCurrency, - value: getMaxMin(props.pair, 'min', props.formValues), + value: getMaxMin( + props.pair, + 'min', + props.formValues, + props.method + ), digits: 0 }), orderType: @@ -254,7 +263,6 @@ const Success: React.FC & Props> = props => { )} - {props.error && ( { switch (minOrMax || 'max') { case 'max': const defaultMax = convertBaseToStandard('FIAT', 0) if (!allValues) return defaultMax - if (!allValues.method) return defaultMax + if (!method) return defaultMax if (!pair) return defaultMax - const max = BigNumber.minimum( - allValues.method.limits.max, - pair.buyMax - ).toString() + const max = BigNumber.minimum(method.limits.max, pair.buyMax).toString() return convertBaseToStandard('FIAT', max) case 'min': const defaultMin = convertBaseToStandard('FIAT', 0) if (!allValues) return defaultMin - if (!allValues.method) return defaultMin + if (!method) return defaultMin if (!pair) return defaultMin - const min = BigNumber.maximum( - allValues.method.limits.min, - pair.buyMin - ).toString() + const min = BigNumber.maximum(method.limits.min, pair.buyMin).toString() return convertBaseToStandard('FIAT', min) } 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 f15885fe4ba..9384501fbe7 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 @@ -11,6 +11,7 @@ import { } from 'core/types' import { getData } from './selectors' import { RootState } from 'data/rootReducer' +import { SBFormPaymentMethod } from 'data/components/simpleBuy/types' import Failure from './template.failure' import Loading from './template.loading' import React, { PureComponent } from 'react' @@ -49,6 +50,7 @@ const connector = connect(mapStateToProps, mapDispatchToProps) export type OwnProps = { handleClose: () => void + method: SBFormPaymentMethod pair: SBPairType } export type SuccessStateType = { 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 new file mode 100644 index 00000000000..5c0f7ad8e50 --- /dev/null +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/Payments/index.tsx @@ -0,0 +1,53 @@ +import { FlyoutWrapper } from 'components/Flyout' +import { Form, InjectedFormProps, reduxForm } from 'redux-form' +import { FormattedMessage } from 'react-intl' +import { Icon, Text } from 'blockchain-info-components' +import { Props as OwnProps, SuccessStateType } from '../index' +import React from 'react' +import styled from 'styled-components' + +const Wrapper = styled.div` + display: flex; + justify-content: space-between; + flex-direction: column; + height: 100%; +` +const TopText = styled(Text)` + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 7px; +` + +export type Props = OwnProps & SuccessStateType + +const Payments: React.FC & Props> = props => { + return ( + +
+ + + + + + +
+ + ) +} + +export default reduxForm<{}, Props>({ + form: 'sbPaymentMethods', + destroyOnUnmount: false +})(Payments) 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 new file mode 100644 index 00000000000..f15885fe4ba --- /dev/null +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/index.tsx @@ -0,0 +1,66 @@ +import { actions, selectors } from 'data' +import { bindActionCreators, Dispatch } from 'redux' +import { connect, ConnectedProps } from 'react-redux' +import { + FiatEligibleType, + FiatType, + RemoteDataType, + SBCardType, + SBPairType, + SBPaymentMethodsType +} from 'core/types' +import { getData } from './selectors' +import { RootState } from 'data/rootReducer' +import Failure from './template.failure' +import Loading from './template.loading' +import React, { PureComponent } from 'react' +import Success from './template.success' + +class EnterAmount extends PureComponent { + componentDidMount () { + if (this.props.fiatCurrency) { + this.props.simpleBuyActions.fetchSBPaymentMethods(this.props.fiatCurrency) + this.props.simpleBuyActions.fetchSBCards() + } + } + + render () { + return this.props.data.cata({ + Success: val => , + Failure: () => , + Loading: () => , + NotAsked: () => + }) + } +} + +const mapStateToProps = (state: RootState): LinkStatePropsType => ({ + data: getData(state), + fiatCurrency: selectors.components.simpleBuy.getFiatCurrency(state) +}) + +export const mapDispatchToProps = (dispatch: Dispatch) => ({ + analyticsActions: bindActionCreators(actions.analytics, dispatch), + formActions: bindActionCreators(actions.form, dispatch), + simpleBuyActions: bindActionCreators(actions.components.simpleBuy, dispatch) +}) + +const connector = connect(mapStateToProps, mapDispatchToProps) + +export type OwnProps = { + handleClose: () => void + pair: SBPairType +} +export type SuccessStateType = { + cards: Array + eligibility: FiatEligibleType + paymentMethods: SBPaymentMethodsType +} +export type LinkStatePropsType = { + data: RemoteDataType + fiatCurrency: undefined | FiatType +} +export type LinkDispatchPropsType = ReturnType +export type Props = OwnProps & ConnectedProps + +export default connector(EnterAmount) diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/selectors.ts new file mode 100644 index 00000000000..616b2cc5709 --- /dev/null +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/selectors.ts @@ -0,0 +1,16 @@ +import { lift } from 'ramda' +import { selectors } from 'data' + +export const getData = state => { + const cardsR = selectors.components.simpleBuy.getSBCards(state) + const eligibilityR = selectors.components.simpleBuy.getSBFiatEligible(state) + const paymentMethodsR = selectors.components.simpleBuy.getSBPaymentMethods( + state + ) + + return lift((cards, eligibility, paymentMethods) => ({ + cards, + eligibility, + paymentMethods + }))(cardsR, eligibilityR, paymentMethodsR) +} diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/template.failure.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/template.failure.tsx new file mode 100644 index 00000000000..a8f56f4d871 --- /dev/null +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/template.failure.tsx @@ -0,0 +1,62 @@ +import { Button, Image, Text } from 'blockchain-info-components' +import { FormattedMessage } from 'react-intl' +import { LinkDispatchPropsType, LinkStatePropsType } from '.' +import React from 'react' +import styled from 'styled-components' + +const Wrapper = styled.div` + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: 0 56px; + box-sizing: border-box; +` +const Title = styled(Text)` + margin: 40px 0px 24px 0px; +` + +const Failure: React.FC = props => { + return ( + +
+ + + <FormattedMessage + id='modals.simplebuy.eligible.failure' + defaultMessage='Oops. Something went wrong on our side. Please try again.' + /> + + +
+ + ) +} + +export default Failure diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/template.loading.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/template.loading.tsx new file mode 100644 index 00000000000..8292a006bf6 --- /dev/null +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/template.loading.tsx @@ -0,0 +1,31 @@ +import { FormattedMessage } from 'react-intl' +import { SpinningLoader, Text } from 'blockchain-info-components' +import React from 'react' +import styled from 'styled-components' + +interface Props {} + +const Wrapper = styled.div` + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + display: flex; + flex-direction: column; +` + +const Loading: React.FC = () => { + return ( + + + + + + + ) +} + +export default Loading diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/template.success.tsx new file mode 100644 index 00000000000..16f7c38253b --- /dev/null +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/template.success.tsx @@ -0,0 +1,26 @@ +import { LinkStatePropsType, Props as OwnProps, SuccessStateType } from '.' +import Payments from './Payments' +import React, { useEffect } from 'react' +import Unsupported from './template.unsupported' + +const Success: React.FC = props => { + const isUserEligible = + props.paymentMethods.methods.length && + props.paymentMethods.methods.find(method => method.limits.max !== '0') + + useEffect(() => { + props.analyticsActions.logEvent([ + 'IS_USER_SB_ELIGIBLE', + JSON.stringify({ + paymentMethods: props.paymentMethods, + doesWalletConsiderUserEligible: !!isUserEligible + }) + ]) + }, []) + + return isUserEligible ? : +} + +export type Props = OwnProps & SuccessStateType & LinkStatePropsType + +export default Success diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/template.unsupported.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/template.unsupported.tsx new file mode 100644 index 00000000000..0db1444d8a8 --- /dev/null +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/PaymentMethods/template.unsupported.tsx @@ -0,0 +1,121 @@ +import { Button, Icon, Image, Text } from 'blockchain-info-components' +import { FlyoutWrapper } from 'components/Flyout' +import { FormattedMessage } from 'react-intl' +import { LinkStatePropsType, Props as OwnProps, SuccessStateType } from '.' +import React from 'react' +import styled from 'styled-components' + +export type Props = OwnProps & SuccessStateType & LinkStatePropsType + +const Top = styled(FlyoutWrapper)` + padding-bottom: 0px; + position: relative; + height: 100%; +` + +const CloseIcon = styled(Icon)` + position: absolute; + padding: inherit; + left: 0px; + top: 0px; +` + +const Container = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +` + +const Title = styled(Text)` + margin: 56px 0 16px 0; + text-align: center; +` + +const Subcontent = styled(Text)` + margin-bottom: 56px; + text-align: center; +` + +const Unsupported: React.FC = props => { + const { paymentAccountEligible } = props.eligibility + + return ( + + + props.simpleBuyActions.setStep({ step: 'CURRENCY_SELECTION' }) + } + /> + + + + <FormattedMessage + id='modals.simplebuy.unsupported-title' + defaultMessage='Buy Crypto Coming Soon for' + />{' '} + {paymentAccountEligible ? ( + props.fiatCurrency + ) : ( + <FormattedMessage + id='modals.simplebuy.fiataccountineligible' + defaultMessage='your region.' + /> + )} + + + {paymentAccountEligible ? ( + <> + {' '} + {props.fiatCurrency} + {'. '} + + ) : ( + <> + {' '} + + {'. '} + + )} + + + + + + ) +} + +export default Unsupported 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 13dccb5cd01..1a0a1bd2096 100644 --- a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx +++ b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx @@ -3,7 +3,7 @@ import { bindActionCreators, compose, Dispatch } from 'redux' import { connect } from 'react-redux' import { ModalPropsType } from '../types' import { RootState } from 'data/rootReducer' -import { SBOrderType, SBPairType } from 'core/types' +import { SBOrderType, SBPairType, SBPaymentMethodType } from 'core/types' import { SimpleBuyStepType } from 'data/types' import AddCard from './AddCard' import BillingAddress from './BillingAddress' @@ -15,6 +15,7 @@ import EnterAmount from './EnterAmount' import Flyout, { duration, FlyoutChild } from 'components/Flyout' import ModalEnhancer from 'providers/ModalEnhancer' import OrderSummary from './OrderSummary' +import PaymentMethods from './PaymentMethods' import React, { PureComponent } from 'react' import ThreeDSHandler from './ThreeDSHandler' import TransferDetails from './TransferDetails' @@ -81,7 +82,7 @@ class SimpleBuy extends PureComponent { )} {this.props.step === 'PAYMENT_METHODS' && ( - + )} {this.props.step === 'ADD_CARD' && ( @@ -163,7 +164,6 @@ type LinkStatePropsType = | 'TRANSFER_DETAILS' | 'ORDER_SUMMARY' | 'CANCEL_ORDER' - | 'PAYMENT_METHODS' } | { cardId?: string @@ -171,9 +171,14 @@ type LinkStatePropsType = step: 'ADD_CARD' } | { + method: SBPaymentMethodType pair: SBPairType step: 'ENTER_AMOUNT' } + | { + pair: SBPairType + step: 'PAYMENT_METHODS' + } type Props = OwnProps & LinkDispatchPropsType & LinkStatePropsType type State = { direction: 'left' | 'right'; show: boolean } diff --git a/typings/redux-form.d.ts b/typings/redux-form.d.ts index 759ea129c81..3415df59cca 100644 --- a/typings/redux-form.d.ts +++ b/typings/redux-form.d.ts @@ -29,6 +29,7 @@ export type WalletFormType = | 'sbCheckoutConfirm' | 'sbCurrencySelection' | 'sbCryptoSelection' + | 'sbPaymentMethods' | 'simpleBuyCheckout' | 'transferEth' | 'transactionReport'