-
Notifications
You must be signed in to change notification settings - Fork 504
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(simple buy): add cards to general settings page
- Loading branch information
Philip London
committed
Apr 27, 2020
1 parent
2e369d7
commit 6064e44
Showing
6 changed files
with
165 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
149 changes: 131 additions & 18 deletions
149
...lockchain-wallet-v4-frontend/src/scenes/Settings/General/LinkedCards/template.success.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,155 @@ | ||
| import { Button } from 'blockchain-info-components' | ||
| import { Button, Text, TooltipHost } from 'blockchain-info-components' | ||
| import { | ||
| CARD_TYPES, | ||
| DEFAULT_CARD_SVG_LOGO | ||
| } from 'components/Form/CreditCardBox/model' | ||
| import { convertBaseToStandard } from 'data/components/exchange/services' | ||
| import { fiatToString } from 'core/exchange/currency' | ||
| import { FiatType } from 'core/types' | ||
| import { FormattedMessage } from 'react-intl' | ||
| import { Props as OwnProps, SuccessStateType } from '.' | ||
| import { | ||
| SettingComponent, | ||
| SettingContainer, | ||
| SettingHeader, | ||
| SettingSummary | ||
| } from 'components/Setting' | ||
| import { SuccessStateType } from '.' | ||
| import media from 'services/ResponsiveService' | ||
| import React from 'react' | ||
| import styled from 'styled-components' | ||
|
|
||
| const CardWrapper = styled.div` | ||
| display: flex; | ||
| padding: 16px; | ||
| border-radius: 8px; | ||
| margin-bottom: 12px; | ||
| justify-content: space-between; | ||
| border: 1px solid ${props => props.theme.grey000}; | ||
| cursor: pointer; | ||
| width: 430px; | ||
| ${media.mobile` | ||
| width: 100%; | ||
| `} | ||
| ` | ||
| const CustomSettingContainer = styled(SettingContainer)` | ||
| @media (min-width: 992px) { | ||
| flex-direction: row; | ||
| align-items: flex-start; | ||
| justify-content: space-between; | ||
| } | ||
| ` | ||
| const CustomSettingHeader = styled(SettingHeader)` | ||
| margin-bottom: 18px; | ||
| ` | ||
| const CustomSettingComponent = styled(SettingComponent)` | ||
| margin-top: 36px; | ||
| ${media.tablet` | ||
| margin-top: 8px; | ||
| `} | ||
| ` | ||
| const Child = styled.div` | ||
| display: flex; | ||
| div:last-child { | ||
| margin-top: 4px; | ||
| } | ||
| ` | ||
| const CardImg = styled.img` | ||
| margin-right: 14px; | ||
| width: 24px; | ||
| ` | ||
| const CardDetails = styled.div<{ right?: boolean }>` | ||
| text-align: ${props => (props.right ? 'right' : 'initial')}; | ||
| ` | ||
|
|
||
| const Success: React.FC<Props & { fiatCurrency?: FiatType }> = props => { | ||
| const ccPaymentMethod = props.paymentMethods.methods.find( | ||
| m => m.type === 'CARD' | ||
| ) | ||
| const activeCards = props.cards.filter(card => card.state === 'ACTIVE') | ||
|
|
||
| const Success: React.FC<Props> = props => { | ||
| return ( | ||
| <SettingContainer> | ||
| return !activeCards.length ? null : ( | ||
| <CustomSettingContainer> | ||
| <SettingSummary> | ||
| <SettingHeader> | ||
| <CustomSettingHeader> | ||
| <FormattedMessage | ||
| id='scenes.settings.linked_cards' | ||
| defaultMessage='Linked Cards' | ||
| /> | ||
| </SettingHeader> | ||
| {props.cards.map((card, i) => { | ||
| </CustomSettingHeader> | ||
| {activeCards.map((card, i) => { | ||
| let cardType = CARD_TYPES.find( | ||
| cardType => | ||
| cardType.type === (card.card ? card.card.type.toLowerCase() : '') | ||
| ) | ||
|
|
||
| if (card.state !== 'ACTIVE') return | ||
|
|
||
| return ( | ||
| <div key={i}>{card.state === 'ACTIVE' ? card.card.number : ''}</div> | ||
| <CardWrapper | ||
| key={i} | ||
| onClick={() => | ||
| props.simpleBuyActions.showModal('settingsGeneral') | ||
| } | ||
| > | ||
| <Child> | ||
| <CardImg | ||
| src={cardType ? cardType.logo : DEFAULT_CARD_SVG_LOGO} | ||
| /> | ||
| <CardDetails> | ||
| <Text size='16px' color='grey800' weight={600}> | ||
| {card.card.label} | ||
| </Text> | ||
| {ccPaymentMethod && ( | ||
| <Text size='14px' color='grey600' weight={500}> | ||
| {fiatToString({ | ||
| value: convertBaseToStandard( | ||
| 'FIAT', | ||
| ccPaymentMethod.limits.max | ||
| ), | ||
| unit: props.fiatCurrency || 'USD' | ||
| })}{' '} | ||
| {props.fiatCurrency} Limit | ||
| </Text> | ||
| )} | ||
| </CardDetails> | ||
| </Child> | ||
| <Child> | ||
| <CardDetails right> | ||
| <Text size='16px' color='grey800' weight={600}> | ||
| ···· {card.card.number} | ||
| </Text> | ||
| <Text size='14px' color='grey600' weight={500}> | ||
| Exp: {card.card.expireMonth}/{card.card.expireYear} | ||
| </Text> | ||
| </CardDetails> | ||
| <TooltipHost id='coming-soon' data-place='right'> | ||
| <Button | ||
| data-e2e='removeCard' | ||
| nature='light-red' | ||
| disabled | ||
| style={{ marginLeft: '18px', minWidth: 'auto' }} | ||
| > | ||
| <FormattedMessage | ||
| id='buttons.remove' | ||
| defaultMessage='Remove' | ||
| /> | ||
| </Button> | ||
| </TooltipHost> | ||
| </Child> | ||
| </CardWrapper> | ||
| ) | ||
| })} | ||
| </SettingSummary> | ||
| <SettingComponent> | ||
| <Button nature='empty' data-e2e='addCardFromSettings'> | ||
| <FormattedMessage | ||
| id='scenes.lockbox.settings.adddevice.add' | ||
| defaultMessage='Add Device' | ||
| /> | ||
| <CustomSettingComponent> | ||
| <Button nature='primary' data-e2e='addCardFromSettings'> | ||
| <FormattedMessage id='buttons.add_card' defaultMessage='Add Card' /> | ||
| </Button> | ||
| </SettingComponent> | ||
| </SettingContainer> | ||
| </CustomSettingComponent> | ||
| </CustomSettingContainer> | ||
| ) | ||
| } | ||
|
|
||
| type Props = SuccessStateType | ||
| type Props = OwnProps & SuccessStateType | ||
|
|
||
| export default Success |