feat(brokerage): new checkout page for buy with cards has been implem…

…ented feat(brokerage): implemented new buy checkout screen for ACH/OB flows feat(brokerage): fixed copy text" feat(brokerage ux): implemented checkout sell for non custodial and custodial
blockchain · Jun 2, 2021 · 5c13aa8 · 5c13aa8
1 parent 77921e8
commit 5c13aa8
Show file tree

Hide file tree

Showing 6 changed files with 941 additions and 312 deletions.
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
@@ -327,6 +327,7 @@ type MessagesType = {
   'components.txlistitem.erc20fee': 'ERC20 Fee'
   'components.txlistitem.valueattime': 'Value When {type}'
   'components.txlistitem.watchonly': 'Non-Spendable'
+  'copy.account': 'Account'
   'copy.above_swap_max': 'You can swap up to {value}'
   'copy.above_swap_max_silver': 'Upgrade your profile to swap this amount.'
   'copy.actions': 'Actions'
@@ -382,6 +383,7 @@ type MessagesType = {
   'copy.error.locked_withdraw_error': 'Your crypto will be available to be withdrawn within {days} days.'
   'copy.failed': 'Failed'
   'copy.fee': 'Fee'
+  'copy.card_fee': 'Card Fee'
   'copy.find_your_bank': 'Find Your Bank'
   'copy.forms.amount_max': 'The maximum amount is {amount}'
   'copy.forms.amount_min': 'The minimum amount is {amount}'
@@ -403,6 +405,7 @@ type MessagesType = {
   'copy.pending': 'Pending'
   'copy.pending_txs': 'Pending Transactions'
   'copy.privacy_policy': 'Privacy Policy'
+  'copy.purchase': 'Purchase'
   'copy.receive_to': 'Receive to'
   'copy.reset': 'Reset'
   'copy.max': 'Max'
@@ -469,6 +472,7 @@ type MessagesType = {
   'copy.trading_get_access': 'Get access to the Trading Account in seconds by completing your profile and getting Silver access.'
   'copy.trading_start': 'Use the Trading Account'
   'copy.trading_verify_email': 'Verify to use the Trading Account'
+  'copy.deposit_to': 'Deposit To'
   'copy.transaction_fee': 'Transaction Fee'
   'copy.trade': 'Trade'
   'copy.total': 'Total'
@@ -1394,6 +1398,7 @@ type MessagesType = {
   'modals.simplebuy.card_already_saved': 'This card has already been saved.'
   'modals.simplebuy.card_creation_failed': 'We could not save your card. Please contact support.'
   'modals.simplebuy.card_number': 'Card Number'
+  'modals.simplebuy.paying_with_card': 'Blockchain.com requires a fee when paying with a card.'
   'modals.simplebuy.card_pending_after_poll': 'We waited one minute and did not receive an update from our card provider. Your card may still be approved later. Please contact support if you have any questions.'
   'modals.simplebuy.cc_info_received': 'Waiting for information from your bank...'
   'modals.simplebuy.change_billing_address': 'Change Billing Address'
@@ -1414,6 +1419,7 @@ type MessagesType = {
   'modals.simplebuy.checkout.larger_amount.info': 'After completing this transaction, upgrade to Gold level to unlock higher transaction limits and more payment methods.'
   'modals.simplebuy.checkoutconfirm': 'Checkout'
   'modals.simplebuy.confirm.ach_lock': 'For your security, buy orders with a bank account are subject to a holding period of up to {days} days. You can Swap or Sell during this time. We will notify you once the funds are fully available.'
+  'modals.simplebuy.confirm.ach_ob_lock': 'Your final amount might change due to market activity. An initial hold period of {days} days will be applied to your funds. You can Buy, Sell, and Swap during this period.'
   'modals.simplebuy.confirm.activity': 'Your final amount may change due to market activity.'
   'modals.simplebuy.confirm.activity_card11': 'Your final amount might change due to market activity. For your security, buy orders with a bank account are subject up to a 14 day holding period. You can Swap or Sell during this time. We will notify you once the funds are fully available.'
   'modals.simplebuy.confirm.activity_card2': 'Your crypto will be available to be withdrawn within <b>{days} days</b>.'
@@ -1427,6 +1433,11 @@ type MessagesType = {
   'modals.simplebuy.comfirm.price': '{baseCoinTicker} Price'
   'modals.simplebuy.confirm.rate': 'Exchange Rate'
   'modals.simplebuy.confirm.coin_price': '{coin} Price'
+  'modals.simplebuy.confirm.sell_description': "Final amount may change due to market activity.<br /> By approving this Sell you agree to Blockchain.com’s <br /><a href='https://www.blockchain.com/legal/terms' rel='noopener noreferrer' target='_blank'>Refund Policy.</a>"
+  'modals.simplebuy.confirm.coin_tooltip': 'Blockchain.com provides the best market price we receive and applies a spread.'
+  'modals.simplebuy.confirm.sale_amount': 'Sale Amount'
+  'modals.simplebuy.confirm.network_fees': 'Network fees are set by the Bitcoin network.'
+  'modals.simplebuy.confirm.learn_more_about_fees': 'Learn more about fees'
   'modals.simplebuy.processing': 'Processing…'
   'modals.simplebuy.deposit.deposit_button': 'Deposit {amount}'
   'modals.simplebuy.deposit.bank_transfer': 'Bank Transfer'

diff --git a/...ockchain-wallet-v4-frontend/src/modals/SimpleBuy/CheckoutConfirm/TooltipRowItem/index.tsx b/...ockchain-wallet-v4-frontend/src/modals/SimpleBuy/CheckoutConfirm/TooltipRowItem/index.tsx
@@ -0,0 +1,111 @@
+import React, { ReactNode, useState } from 'react'
+import { FormattedMessage } from 'react-intl'
+import styled from 'styled-components'
+
+import { Icon, Link, Text, TextGroup } from 'blockchain-info-components'
+
+interface Props {
+  title: ReactNode
+  value: string
+}
+
+const RowIcon = styled.div`
+  display: flex;
+  flex-direction: row;
+`
+
+const RowItemContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`
+
+const IconWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  cursor: pointer;
+  margin-left: 4px;
+`
+
+const RowText = styled(Text)`
+  font-size: 16px;
+  font-weight: 500;
+  color: ${props => props.theme.grey900};
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`
+const ToolTipText = styled.div`
+  display: flex;
+  flex-direction: row;
+  border-radius: 8px;
+  margin-top: 8px;
+  padding: 16px;
+  background-color: ${props => props.theme.grey000};
+
+  animation: fadeIn 0.3s ease-in-out;
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`
+const TopRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`
+
+const TooltipRowItem = ({ title, value }: Props) => {
+  const [isActiveCoinTooltip, setCoinToolTip] = useState(false)
+  return (
+    <RowItemContainer>
+      <TopRow>
+        <RowIcon>
+          <RowText>{title}</RowText>
+          <IconWrapper>
+            <Icon
+              name='question-in-circle-filled'
+              size='16px'
+              color={isActiveCoinTooltip ? 'blue600' : 'grey300'}
+              onClick={() => setCoinToolTip(!isActiveCoinTooltip)}
+            />
+          </IconWrapper>
+        </RowIcon>
+        <RowText data-e2e='sbExchangeRate'>{value}</RowText>
+      </TopRow>
+      {isActiveCoinTooltip && (
+        <ToolTipText>
+          <Text size='12px' weight={500} color='grey600'>
+            <TextGroup inline>
+              <Text size='14px'>
+                <FormattedMessage
+                  id='modals.simplebuy.paying_with_card'
+                  defaultMessage='Blockchain.com requires a fee when paying with a card.'
+                />
+              </Text>
+              {/* TODO: update link */}
+              <Link
+                href='https://blockchain.zendesk.com/hc/en-us/sections/360002593291-Setting-Up-Lockbox'
+                size='14px'
+                rel='noopener noreferrer'
+                target='_blank'
+              >
+                <FormattedMessage
+                  id='modals.simplebuy.summary.learn_more'
+                  defaultMessage='Learn more'
+                />
+              </Link>
+            </TextGroup>
+          </Text>
+        </ToolTipText>
+      )}
+    </RowItemContainer>
+  )
+}
+
+export default TooltipRowItem