diff --git a/public/img/jcb.svg b/public/img/jcb.svg new file mode 100644 index 0000000000..607e40286f --- /dev/null +++ b/public/img/jcb.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/img/payment-methods/amex.svg b/public/img/payment-methods/amex.svg new file mode 100644 index 0000000000..e5af383caf --- /dev/null +++ b/public/img/payment-methods/amex.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/img/payment-methods/diners-club.svg b/public/img/payment-methods/diners-club.svg new file mode 100644 index 0000000000..38662d39ab --- /dev/null +++ b/public/img/payment-methods/diners-club.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/img/payment-methods/discover.svg b/public/img/payment-methods/discover.svg new file mode 100644 index 0000000000..b932828648 --- /dev/null +++ b/public/img/payment-methods/discover.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/img/payment-methods/mastercard.svg b/public/img/payment-methods/mastercard.svg new file mode 100644 index 0000000000..e9c403a3cc --- /dev/null +++ b/public/img/payment-methods/mastercard.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/img/payment-methods/visa.svg b/public/img/payment-methods/visa.svg new file mode 100644 index 0000000000..1617bc9e34 --- /dev/null +++ b/public/img/payment-methods/visa.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/views/communityBilling/components/source.js b/src/views/communityBilling/components/source.js new file mode 100644 index 0000000000..ee9ed65f9c --- /dev/null +++ b/src/views/communityBilling/components/source.js @@ -0,0 +1,59 @@ +// @flow +import * as React from 'react'; +import { + SourceContainer, + SourceText, + SourceName, + SourceExpiration, +} from '../style'; + +type Props = { + source: { + sourceId: string, + card: { + brand: string, + last4: string, + exp_month: number, + exp_year: number, + }, + }, +}; + +const getCardImage = (brand: string) => { + switch (brand) { + case 'Visa': + return '/img/payment-methods/visa.svg'; + case 'Discover': + return '/img/payment-methods/discover.svg'; + case 'Diners Club': + return '/img/payment-methods/diners-club.svg'; + case 'MasterCard': + return '/img/payment-methods/mastercard.svg'; + case 'American Express': + return '/img/payment-methods/amex.svg'; + default: + return '/img/payment-methods/card-unknown.svg'; + } +}; + +class Source extends React.Component { + render() { + const { source } = this.props; + const imageSrc = getCardImage(source.card.brand); + return ( + + + + + {source.card.brand} ending in {source.card.last4} + + + Expires {source.card.exp_month}/{source.card.exp_year} + + + + ); + } +} + +export default Source; diff --git a/src/views/communityBilling/index.js b/src/views/communityBilling/index.js index 52927a6c8d..84d65e8dba 100644 --- a/src/views/communityBilling/index.js +++ b/src/views/communityBilling/index.js @@ -20,6 +20,7 @@ import viewNetworkHandler, { type ViewNetworkHandlerType, } from '../../components/viewNetworkHandler'; import { Loading } from '../../components/loading'; +import Source from './components/source'; type Props = { ...$Exact, @@ -36,7 +37,7 @@ class CommunityMembersSettings extends React.Component { render() { const { data, isLoading } = this.props; const { community } = data; - console.log(community); + if (community && community.id && community.communityPermissions.isOwner) { if (!community.billingSettings.administratorEmail) { return ( @@ -59,17 +60,10 @@ class CommunityMembersSettings extends React.Component { - Sources + Payment Method {community.billingSettings.sources.map( source => - source && ( -

- {source.sourceId} · {source.card.last4} ·{' '} - {source.card.brand} · Exp {source.card.exp_month}/{ - source.card.exp_year - } -

- ) + source && )} diff --git a/src/views/communityBilling/style.js b/src/views/communityBilling/style.js index a3f69bd80f..f88d0ae936 100644 --- a/src/views/communityBilling/style.js +++ b/src/views/communityBilling/style.js @@ -10,3 +10,27 @@ export const EmailForm = styled.form` margin-left: 16px; } `; + +export const SourceContainer = styled.div` + display: flex; + align-items: center; +`; +export const SourceText = styled.p` + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + margin-left: 12px; +`; +export const SourceName = styled.p` + line-height: 1.3; + font-size: 15px; + font-weight: 500; + color: ${props => props.theme.text.default}; +`; +export const SourceExpiration = styled.p` + line-height: 1.3; + font-size: 14px; + font-weight: 400; + color: ${props => props.theme.text.alt}; +`;