feat(simple buy): add linked cards to settings

blockchain · Apr 27, 2020 · 1f17a1b · 1f17a1b
1 parent 4a53492
commit 1f17a1b
Show file tree

Hide file tree

Showing 13 changed files with 154 additions and 46 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/types.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/types.ts
@@ -1824,6 +1824,7 @@ type MessagesType = {
   'scenes.settings.general.walletid.description': 'Wallet ID is your unique identifier. It is completely individual to you, and it is what you will use to log in and access your wallet. It is NOT a bitcoin address for sending or receiving.'
   'scenes.settings.general.walletid.title': 'Wallet ID'
   'scenes.settings.general.walletid.warning': 'Do not share your Wallet ID with others.'
+  'scenes.settings.linked_cards': 'Linked Cards'
   'scenes.settings.manage_addresses.archive': 'Archive'
   'scenes.settings.manage_addresses.edit_name': 'Edit Name'
   'scenes.settings.manage_addresses.make_default': 'Make Default'

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modals/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/modals/types.ts
@@ -15,6 +15,7 @@ export type ModalNamesType =
   | '@MODAL.SEND.ETH'
   | '@MODAL.SEND.PAX'
   | '@MODAL.SEND.XLM'
+  | 'PairingCode'
   | 'RECOVERY_PHRASE_MODAL'
   | 'ShowEthPrivateKey'
   | 'ShowXlmPrivateKey'

diff --git a/...chain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/MethodSelect/index.tsx b/...chain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/MethodSelect/index.tsx
@@ -85,7 +85,7 @@ class MethodSelect extends PureComponent<Props> {
       case 'CARD':
         return 'Credit or Debit Card'
       case 'USER_CARD':
-        return value.card.label
+        return value && value.card ? value.card.label : 'Credit or Debit Card'
     }
   }
 
@@ -105,7 +105,8 @@ class MethodSelect extends PureComponent<Props> {
         )
       case 'USER_CARD':
         let cardType = CARD_TYPES.find(
-          card => card.type === value.card.type.toLowerCase()
+          card =>
+            card.type === (value.card ? value.card.type.toLowerCase() : '')
         )
         return (
           <img
@@ -125,7 +126,7 @@ class MethodSelect extends PureComponent<Props> {
       m => m.type === 'CARD'
     )
     const cardMethods = availableCards.map(card => ({
-      text: card.card.label,
+      text: card.card ? card.card.label : 'Credit or Debit Card',
       value: {
         ...card,
         type: 'USER_CARD',
@@ -173,7 +174,7 @@ class MethodSelect extends PureComponent<Props> {
             })}
           </Limit>
         </Display>
-        {props.value.type === 'USER_CARD' && (
+        {props.value.type === 'USER_CARD' && props.value.state === 'ACTIVE' && (
           <CardLimitsDisplay isItem={isItem}>
             ···· {props.value.card.number}
             <Limit>

diff --git a/...rc/scenes/Settings/General/About/index.js → ...c/scenes/Settings/General/About/index.tsx b/...rc/scenes/Settings/General/About/index.js → ...c/scenes/Settings/General/About/index.tsx
@@ -1,14 +1,13 @@
-import { FormattedMessage } from 'react-intl'
-import React from 'react'
-
 import { Button, Icon, Link } from 'blockchain-info-components'
+import { FormattedMessage } from 'react-intl'
 import {
   SettingComponent,
   SettingContainer,
   SettingDescription,
   SettingHeader,
   SettingSummary
 } from 'components/Setting'
+import React from 'react'
 
 const About = () => {
   return (
@@ -29,7 +28,7 @@ const About = () => {
       </SettingSummary>
       <SettingComponent>
         <Link href='https://www.blockchain.com/about' target='_blank'>
-          <Button nature='empty'>
+          <Button data-e2e='aboutLink' nature='empty'>
             <Icon name='open-in-new-tab' size='20px' />
           </Button>
         </Link>

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/index.tsx
@@ -0,0 +1,46 @@
+import { actions } from 'data'
+import { bindActionCreators, Dispatch } from 'redux'
+import { connect, ConnectedProps } from 'react-redux'
+import { getData } from './selectors'
+import { RemoteDataType, SBCardType } from 'core/types'
+import { RootState } from 'data/rootReducer'
+import React, { PureComponent } from 'react'
+import Success from './template.success'
+
+class LinkedCards extends PureComponent<Props> {
+  componentDidMount () {
+    this.props.simpleBuyActions.fetchSBCards()
+  }
+
+  render () {
+    return this.props.data.cata({
+      Success: val => <Success {...val} />,
+      Loading: () => null,
+      Failure: () => null,
+      NotAsked: () => null
+    })
+  }
+}
+
+const mapStateToProps = (state: RootState): LinkStatePropsType => ({
+  data: getData(state)
+})
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  simpleBuyActions: bindActionCreators(actions.components.simpleBuy, dispatch)
+})
+
+const connector = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)
+
+export type SuccessStateType = {
+  cards: Array<SBCardType>
+}
+type LinkStatePropsType = {
+  data: RemoteDataType<string, SuccessStateType>
+}
+type Props = ConnectedProps<typeof connector>
+
+export default connector(LinkedCards)
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/selectors.ts b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/selectors.ts
@@ -0,0 +1,9 @@
+import { lift } from 'ramda'
+import { RootState } from 'data/rootReducer'
+import { selectors } from 'data'
+
+export const getData = (state: RootState) => {
+  const cardsR = selectors.components.simpleBuy.getSBCards(state)
+
+  return lift(cards => ({ cards }))(cardsR)
+}
diff --git a/...lockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/template.success.tsx b/...lockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/template.success.tsx
@@ -0,0 +1,42 @@
+import { Button } from 'blockchain-info-components'
+import { FormattedMessage } from 'react-intl'
+import {
+  SettingComponent,
+  SettingContainer,
+  SettingHeader,
+  SettingSummary
+} from 'components/Setting'
+import { SuccessStateType } from '.'
+import React from 'react'
+
+const Success: React.FC<Props> = props => {
+  return (
+    <SettingContainer>
+      <SettingSummary>
+        <SettingHeader>
+          <FormattedMessage
+            id='scenes.settings.linked_cards'
+            defaultMessage='Linked Cards'
+          />
+        </SettingHeader>
+        {props.cards.map((card, i) => {
+          return (
+            <div key={i}>{card.state === 'ACTIVE' ? card.card.number : ''}</div>
+          )
+        })}
+      </SettingSummary>
+      <SettingComponent>
+        <Button nature='empty' data-e2e='addCardFromSettings'>
+          <FormattedMessage
+            id='scenes.lockbox.settings.adddevice.add'
+            defaultMessage='Add Device'
+          />
+        </Button>
+      </SettingComponent>
+    </SettingContainer>
+  )
+}
+
+type Props = SuccessStateType
+
+export default Success
diff --git a/...nes/Settings/General/PairingCode/index.js → ...es/Settings/General/PairingCode/index.tsx b/...nes/Settings/General/PairingCode/index.js → ...es/Settings/General/PairingCode/index.tsx
@@ -1,18 +1,17 @@
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { FormattedMessage } from 'react-intl'
-import React from 'react'
-import styled from 'styled-components'
-
 import { actions } from 'data'
 import { Badge, Button, Text } from 'blockchain-info-components'
+import { bindActionCreators } from 'redux'
+import { connect, ConnectedProps } from 'react-redux'
+import { FormattedMessage } from 'react-intl'
 import {
   SettingComponent,
   SettingContainer,
   SettingDescription,
   SettingHeader,
   SettingSummary
 } from 'components/Setting'
+import React from 'react'
+import styled from 'styled-components'
 
 const BadgesContainer = styled.div`
   display: block;
@@ -23,7 +22,7 @@ const BadgesContainer = styled.div`
   }
 `
 
-class PairingCode extends React.PureComponent {
+class PairingCode extends React.PureComponent<Props> {
   onShowCode = () => {
     this.props.modalActions.showModal('PairingCode')
   }
@@ -42,8 +41,8 @@ class PairingCode extends React.PureComponent {
             <FormattedMessage
               id='scenes.settings.general.pairingcode.description'
               defaultMessage="Scan the code (click on 'Show Pairing Code') with your Blockchain Wallet (iOS or Android) for a seamless connection to your wallet."
-              altFont
-              light
+              // altFont
+              // light
             />
             <FormattedMessage
               id='scenes.settings.general.pairingcode.description2'
@@ -62,7 +61,11 @@ class PairingCode extends React.PureComponent {
           </SettingDescription>
         </SettingSummary>
         <SettingComponent>
-          <Button nature='primary' onClick={this.onShowCode}>
+          <Button
+            data-e2e='showQrCode'
+            nature='primary'
+            onClick={this.onShowCode}
+          >
             <FormattedMessage
               id='scenes.settings.general.pairingcode.settings.show'
               defaultMessage='Show Pairing Code'
@@ -78,7 +81,11 @@ const mapDispatchToProps = dispatch => ({
   modalActions: bindActionCreators(actions.modals, dispatch)
 })
 
-export default connect(
+const connector = connect(
   null,
   mapDispatchToProps
-)(PairingCode)
+)
+
+type Props = ConnectedProps<typeof connector>
+
+export default connector(PairingCode)
diff --git a/...s/Settings/General/PrivacyPolicy/index.js → .../Settings/General/PrivacyPolicy/index.tsx b/...s/Settings/General/PrivacyPolicy/index.js → .../Settings/General/PrivacyPolicy/index.tsx
@@ -29,7 +29,7 @@ const PrivacyPolicy = () => {
       </SettingSummary>
       <SettingComponent>
         <Link href='https://www.blockchain.com/legal/privacy' target='_blank'>
-          <Button nature='empty'>
+          <Button data-e2e='privacyLink' nature='empty'>
             <Icon name='open-in-new-tab' size='20px' />
           </Button>
         </Link>

diff --git a/.../Settings/General/TermsOfService/index.js → ...Settings/General/TermsOfService/index.tsx b/.../Settings/General/TermsOfService/index.js → ...Settings/General/TermsOfService/index.tsx
@@ -29,7 +29,7 @@ const TermsOfService = () => {
       </SettingSummary>
       <SettingComponent>
         <Link href='https://www.blockchain.com/legal/terms' target='_blank'>
-          <Button nature='empty'>
+          <Button data-e2e='termsLink' nature='empty'>
             <Icon name='open-in-new-tab' size='20px' />
           </Button>
         </Link>

diff --git a/...scenes/Settings/General/WalletId/index.js → ...cenes/Settings/General/WalletId/index.tsx b/...scenes/Settings/General/WalletId/index.js → ...cenes/Settings/General/WalletId/index.tsx
@@ -1,7 +1,5 @@
-import { connect } from 'react-redux'
+import { connect, ConnectedProps } from 'react-redux'
 import { FormattedMessage } from 'react-intl'
-import React from 'react'
-
 import { selectors } from 'data'
 import {
   SettingComponent,
@@ -11,8 +9,9 @@ import {
   SettingSummary
 } from 'components/Setting'
 import { Text } from 'blockchain-info-components'
+import React from 'react'
 
-const WalletId = props => {
+const WalletId = (props: Props) => {
   return (
     <SettingContainer>
       <SettingSummary>
@@ -46,4 +45,8 @@ const mapStateToProps = state => ({
   guid: selectors.core.wallet.getGuid(state)
 })
 
-export default connect(mapStateToProps)(WalletId)
+const connector = connect(mapStateToProps)
+
+type Props = ConnectedProps<typeof connector>
+
+export default connector(WalletId)
diff --git a/...tend/src/scenes/Settings/General/index.js → ...end/src/scenes/Settings/General/index.tsx b/...tend/src/scenes/Settings/General/index.js → ...end/src/scenes/Settings/General/index.tsx
@@ -1,20 +1,15 @@
-import { FormattedMessage } from 'react-intl'
-import React from 'react'
-import styled from 'styled-components'
-
 import { Banner, Text } from 'blockchain-info-components'
-
+import { FormattedMessage } from 'react-intl'
 import About from './About'
+import LinkedCards from './LinkedCards'
 import PairingCode from './PairingCode'
 import PrivacyPolicy from './PrivacyPolicy'
+import React from 'react'
+import styled from 'styled-components'
 import TermsOfService from './TermsOfService'
 import WalletId from './WalletId'
 
-const Wrapper = styled.section`
-  padding: 30px;
-  width: 100%;
-  box-sizing: border-box;
-`
+const Wrapper = styled.section``
 
 const General = () => {
   return (
@@ -34,6 +29,7 @@ const General = () => {
       </Banner>
       <WalletId />
       <PairingCode />
+      <LinkedCards />
       <PrivacyPolicy />
       <TermsOfService />
       <About />

diff --git a/packages/blockchain-wallet-v4/src/network/api/simpleBuy/types.ts b/packages/blockchain-wallet-v4/src/network/api/simpleBuy/types.ts
@@ -65,18 +65,21 @@ export type SBCardType = {
   addedAt: Date
   address: NabuAddressType
   attributes: {}
-  card: {
-    expireMonth: number
-    expireYear: number
-    label: string
-    number: string
-    type: 'VISA' | 'MASTERCARD'
-  }
   currency: 'EUR'
   id: string
   partner: 'EVERYPAY'
-  state: SBCardStateType
-}
+} & (
+  | {
+      card: {
+        expireMonth: number
+        expireYear: number
+        label: string
+        number: string
+        type: 'VISA' | 'MASTERCARD'
+      }
+      state: 'ACTIVE'
+    }
+  | { card: null; state: Exclude<SBCardStateType, 'ACTIVE'> })
 
 export type SBCardStateType =
   | 'PENDING'