feat(seamless limits): fixed issue with send crypto, added missing ba…

…nner
blockchain · Jan 18, 2022 · 290859e · 290859e
1 parent 5b5dffc
commit 290859e
Show file tree

Hide file tree

Showing 7 changed files with 154 additions and 3 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
@@ -413,6 +413,7 @@ type MessagesType = {
   'copy.failed': 'Failed'
   'copy.fee': 'Fee'
   'copy.got_it': 'Got It'
+  'copy.get_more_coin': 'Get More {coin}'
   'copy.card_fee': 'Card Fee'
   'copy.find_your_bank': 'Find Your Bank'
   'copy.forgot_exchange_password': 'Forgot Exchange Password'

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Flyout/Banners/BuyMoreLine.stories.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Flyout/Banners/BuyMoreLine.stories.tsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import { IntlProvider } from 'react-intl'
+import { Provider } from 'react-redux'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { combineReducers, createStore } from 'redux'
+
+import BuyMoreLine from './BuyMoreLine'
+
+const store = createStore(combineReducers({}))
+
+export default {
+  args: {
+    buyAmount: '333 ETH',
+    close: () => {},
+    coin: 'ETH',
+    startBuy: () => {}
+  },
+  component: BuyMoreLine,
+  decorators: [
+    (Story) => (
+      <Provider store={store}>
+        <IntlProvider locale='en'>
+          <div style={{ display: 'flex', height: '100vh', width: '480px' }}>{Story()}</div>
+        </IntlProvider>
+      </Provider>
+    )
+  ],
+  title: 'Flyouts/Banners/BuyMoreLine'
+} as ComponentMeta<typeof BuyMoreLine>
+
+export const Template: ComponentStory<typeof BuyMoreLine> = (args) => <BuyMoreLine {...args} />
+
+export const Default = Template.bind({})
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Flyout/Banners/BuyMoreLine.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Flyout/Banners/BuyMoreLine.tsx
@@ -0,0 +1,98 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import styled from 'styled-components'
+
+import { Button, Icon, Text } from 'blockchain-info-components'
+import { media } from 'services/styles'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid ${(props) => props.theme.blue400};
+  border-radius: 12px;
+  padding: 16px 18px;
+  margin: 10px 0;
+
+  ${media.atLeastLaptop`
+    height: 72px;
+    padding: 0 20px;
+  `}
+  ${media.mobile`
+    padding: 12px;
+    flex-direction: column;
+  `}
+`
+const Row = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+const SpacedRow = styled(Row)`
+  justify-content: space-between;
+  width: 100%;
+`
+
+const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`
+const PendingIconWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 40px;
+  width: 40px;
+  min-width: 40px;
+  border-radius: 20px;
+`
+
+const BannerButton = styled(Button)`
+  height: 32px;
+  width: 46px;
+  font-size: 14px;
+  border-radius: 42px;
+  min-width: 0;
+  text-transform: uppercase;
+`
+
+const BuyMoreLine = ({ buyAmount, coin, startBuy }: Props) => {
+  return (
+    <Wrapper>
+      <SpacedRow>
+        <PendingIconWrapper>
+          <Icon size='32px' color={coin} name={coin} />
+        </PendingIconWrapper>
+        <Column>
+          <Text size='12px' weight={500} color='grey900'>
+            <FormattedMessage
+              id='copy.get_more_coin'
+              defaultMessage='Get More {coin}'
+              values={{
+                coin
+              }}
+            />
+          </Text>
+          <Text size='14px' weight={500} color='grey900'>
+            <FormattedMessage
+              id='buttons.buy_coin'
+              defaultMessage='Buy {displayName}'
+              values={{
+                displayName: buyAmount
+              }}
+            />
+          </Text>
+        </Column>
+        <BannerButton onClick={startBuy} data-e2e='continueToBuy' nature='primary'>
+          <FormattedMessage id='buttons.buy' defaultMessage='Buy' />
+        </BannerButton>
+      </SpacedRow>
+    </Wrapper>
+  )
+}
+
+type Props = { buyAmount: string; coin: string; startBuy: () => void }
+
+export default BuyMoreLine
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/buySell/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/buySell/types.ts
@@ -103,6 +103,7 @@ export type BSShowModalOriginType =
   | 'InterestPage'
   | 'RecurringBuyPromo'
   | 'SellEmpty'
+  | 'Send'
   | 'SettingsGeneral'
   | 'SettingsProfile'
   | 'SideNav'

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SendCrypto/EnterAmount/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SendCrypto/EnterAmount/index.tsx
@@ -10,13 +10,14 @@ import { convertCoinToCoin, convertCoinToFiat, convertFiatToCoin } from '@core/e
 import Currencies from '@core/exchange/currencies'
 import { formatFiat } from '@core/exchange/utils'
 import { getRatesSelector } from '@core/redux/data/misc/selectors'
-import { RatesType } from '@core/types'
+import { CoinType, RatesType } from '@core/types'
 import { Button, Icon, SkeletonRectangle, Text } from 'blockchain-info-components'
 import { DisplayContainer } from 'components/BuySell'
 import { BlueCartridge, ErrorCartridge } from 'components/Cartridge'
 import CollapseText from 'components/CollapseText'
 import { AmountTextBox } from 'components/Exchange'
 import { FlyoutWrapper } from 'components/Flyout'
+import BuyMoreLine from 'components/Flyout/Banners/BuyMoreLine'
 import UpgradeToGoldLine, { Flows } from 'components/Flyout/Banners/UpgradeToGoldLine'
 import { StepHeader } from 'components/Flyout/SendRequestCrypto'
 import { Form } from 'components/Form'
@@ -122,6 +123,7 @@ const SendEnterAmount: React.FC<InjectedFormProps<{}, Props> & Props> = (props)
   }
 
   const {
+    buySellActions,
     formActions,
     formErrors,
     formValues,
@@ -463,9 +465,24 @@ const SendEnterAmount: React.FC<InjectedFormProps<{}, Props> & Props> = (props)
           </AlertButton>
         )}
 
-        {sendLimits?.suggestedUpgrade?.requiredTier === TIER_TYPES.GOLD && (
+        {(sendLimits?.suggestedUpgrade?.requiredTier === TIER_TYPES.GOLD ||
+          (amtError && amtError === 'ABOVE_MAX_LIMIT' && effectiveLimit)) && (
           <UpgradeToGoldLine type={Flows.SEND} verifyIdentity={verifyIdentity} />
         )}
+
+        {amtError === 'ABOVE_MAX' && (
+          <BuyMoreLine
+            startBuy={() =>
+              buySellActions.showModal({
+                cryptoCurrency: coin as CoinType,
+                orderType: 'BUY',
+                origin: 'Send'
+              })
+            }
+            buyAmount={`${coin} ${amount}`}
+            coin={coin}
+          />
+        )}
       </FlyoutWrapper>
     </Wrapper>
   )

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SendCrypto/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SendCrypto/index.tsx
@@ -95,6 +95,7 @@ const mapStateToProps = (state: RootState) => ({
 })
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({
+  buySellActions: bindActionCreators(actions.components.buySell, dispatch),
   formActions: bindActionCreators(actions.form, dispatch),
   routerActions: bindActionCreators(actions.router, dispatch),
   sendCryptoActions: bindActionCreators(actions.components.sendCrypto, dispatch),

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Home/PriceChart/Actions/template.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Home/PriceChart/Actions/template.tsx
@@ -24,7 +24,7 @@ const BuyTradeButton = styled(Button)`
   }
 `
 
-const Actions = ({ buySellActions, coinName, cryptoCurrency, swapActions }: Props) => {
+const Actions = ({ buySellActions, coinName, swapActions }: Props) => {
   return (
     <Wrapper>
       <BuyTradeButton