Style sources

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<Props> {
+  render() {
+    const { source } = this.props;
+    const imageSrc = getCardImage(source.card.brand);
+    return (
+      <SourceContainer>
+        <img src={imageSrc} width={48} />
+        <SourceText>
+          <SourceName>
+            {source.card.brand} ending in {source.card.last4}
+          </SourceName>
+          <SourceExpiration>
+            Expires {source.card.exp_month}/{source.card.exp_year}
+          </SourceExpiration>
+        </SourceText>
+      </SourceContainer>
+    );
+  }
+}
+
+export default Source;

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<ViewNetworkHandlerType>,
@@ -36,7 +37,7 @@ class CommunityMembersSettings extends React.Component<Props> {
   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<Props> {
 
           <Column>
             <SectionCard>
-              <SectionTitle>Sources</SectionTitle>
+              <SectionTitle>Payment Method</SectionTitle>
               {community.billingSettings.sources.map(
                 source =>
-                  source && (
-                    <p key={source.sourceId}>
-                      {source.sourceId} · {source.card.last4} ·{' '}
-                      {source.card.brand} · Exp {source.card.exp_month}/{
-                        source.card.exp_year
-                      }
-                    </p>
-                  )
+                  source && <Source key={source.sourceId} source={source} />
               )}
             </SectionCard>
 

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};
+`;