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 d9282891cf6..afc0217353e 100644 --- a/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json +++ b/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json @@ -1113,6 +1113,7 @@ "modals.simplebuy.selectcurrency": "Select Your Currency", "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.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 ec54f21a39d..d85d531f89b 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 @@ -1116,6 +1116,7 @@ type MessagesType = { 'modals.simplebuy.confirm.activity': 'Your final amount may change due to market activity.' 'modals.simplebuy.confirm.buynow': 'Buy Now' 'modals.simplebuy.confirm.fee': 'Fees' + 'modals.simplebuy.confirm.jump_to_payment': 'Select Cash or Card' 'modals.simplebuy.confirm.payment': 'Payment Method' 'modals.simplebuy.confirm.rate': 'Exchange Rate' 'modals.simplebuy.confirm.total': 'Total' @@ -1139,6 +1140,7 @@ type MessagesType = { 'modals.simplebuy.selectcurrency': 'Select Your Currency' '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.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/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx index f8036c93112..44e6013192a 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 @@ -91,6 +91,36 @@ const ErrorText = styled(Text)` margin-bottom: 16px; ` +const JumpToPayment = styled.div` + border: 1px solid ${props => props.theme.grey100}; + box-sizing: border-box; + width: 400px; + height: 80px; + border-radius: 8px; + margin-bottom: 24px; + display: flex; + flex-direction: row; + cursor: pointer; + padding: 23px 28px 28px 28px; + line-height: 32px; + justify-content: space-between; +` + +const JumpIconWrapper = styled.div` + background-color: ${props => props.theme.blue000}; + width: 32px; + height: 32px; + border-radius: 50%; + margin-right: 22px; +` +const JumpText = styled(Text)` + width: 285px; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 32px; +` + export type Props = OwnProps & SuccessStateType const normalizeAmount = ( @@ -263,6 +293,32 @@ const Success: React.FC & Props> = props => { )} + + props.simpleBuyActions.setStep({ + step: 'PAYMENT_METHODS', + pair: props.pair, + fiatCurrency: props.fiatCurrency || 'USD' + }) + } + > + + + + + + + + {props.error && ( props.theme.grey000}; +` + +// const IconContainer = styled.div` +// width: 38px; +// height: 32px; +// border-radius: 16px; +// background-color: ${props => props.theme.blue000}; +// display: flex; +// align-items: center; +// justify-content: center; +// ` export type Props = OwnProps & SuccessStateType -const Payments: React.FC & Props> = props => { - return ( - -
- - - - - - -
-
- ) +class Payments extends PureComponent & Props> { + getType = (value: SBFormPaymentMethod) => { + switch (value.type) { + case 'BANK_ACCOUNT': + return 'Bank Wire Transfer' + case 'PAYMENT_CARD': + return 'Add a Credit or Debit Card' + case 'USER_CARD': + return value && value.card + ? value.card.label + ? value.card.label + : value.card.type + : 'Add a Credit or Debit Card' + case 'FUNDS': + return '' + } + } + + // getIcon = (value: SBCheckoutFormValuesType): ReactElement => { + // switch (value.type) { + // case 'BANK_ACCOUNT': + // return ( + // + // + // + // ) + // case 'PAYMENT_CARD': + // return ( + // + // + // + // ) + // case 'USER_CARD': + // let cardType = CARD_TYPES.find( + // card => card.type === (value.card ? value.card.type : '') + // ) + // return ( + // + // ) + // case 'FUNDS': + // return <> + // } + // } + + renderElements = () => { + const availableCards = this.props.cards.filter( + card => card.state === 'ACTIVE' + ) + const defaultCardMethod = this.props.paymentMethods.methods.find( + m => m.type === 'PAYMENT_CARD' + ) + const cardMethods = availableCards.map(card => ({ + text: card.card + ? card.card.label + ? card.card.label + : card.card.type + : 'Credit or Debit Card', + value: { + ...card, + type: 'USER_CARD', + limits: defaultCardMethod + ? defaultCardMethod.limits + : { min: '1000', max: '500000' } + } + })) + const defaultMethods = this.props.paymentMethods.methods.map(value => ({ + text: this.getType(value), + value + })) + // TODO: remove when adding FUNDS type + const defaultMethodsNoFunds = defaultMethods.filter( + method => method.value.type !== 'FUNDS' + ) + + const itemsss = { + group: '', + items: [...cardMethods, ...defaultMethodsNoFunds] + } + // eslint-disable-next-line + console.log('itemsss', itemsss) + + // eslint-disable-next-line + console.log('availableCards', availableCards) + // eslint-disable-next-line + console.log('defaultMethodsNoFunds', defaultMethodsNoFunds) + + // return [ + // { + // group: '', + // items: [...cardMethods, ...defaultMethodsNoFunds] + // } + // ] + } + + render () { + return ( + +
+ + + + this.props.simpleBuyActions.setStep({ + step: 'ENTER_AMOUNT', + fiatCurrency: this.props.fiatCurrency || 'USD', + pair: this.props.pair + }) + } + /> +
+ +
+
+
+ {this.renderElements()} + + +
+ +
+
+
+
+ ) + } } export default reduxForm<{}, Props>({