Add no cards message (fixes #237)

.csslintrc

@@ -8,6 +8,7 @@
     "fallback-colors": false,
     "font-faces": false,
     "font-sizes": false,
+    "floats": false,
     "ids": false,
     "important": false,
     "outline-none": false,

.eslintrc

@@ -62,7 +62,7 @@
     "no-underscore-dangle": 0,
     "no-unused-vars": 2,
     "no-with": 2,
-    "quotes": [2, "single"],
+    "quotes": [2, "single", "avoid-escape"],
     "react/display-name": 0,
     "react/jsx-boolean-value": 1,
     "react/jsx-quotes": 1,

public/js/apps/management/app.jsx

@@ -11,20 +11,20 @@ import { parseQuery } from 'utils';
 
 import ModalError from 'views/modal-error';
 import { default as DefaultManagement } from 'views/management';
-import { default as DefaultManageCards } from 'views/manage-cards';
+import { default as DefaultPayMethods } from 'views/pay-methods';
 
 
 export default class ManagementApp extends Component {
 
   static propTypes = {
-    ManageCards: PropTypes.element,
     Management: PropTypes.element,
+    PayMethods: PropTypes.element,
     window: PropTypes.object,
   }
 
   static defaultProps = {
-    ManageCards: DefaultManageCards,
     Management: DefaultManagement,
+    PayMethods: DefaultPayMethods,
     window: window,
   }
 
@@ -43,7 +43,7 @@ export default class ManagementApp extends Component {
     var boundUserActions = bindActionCreators(userActions, connector.dispatch);
     var children = [];
     var Management = this.props.Management;
-    var ManageCards = this.props.ManageCards;
+    var PayMethods = this.props.PayMethods;
 
     if (connector.management.error) {
       children.push(
@@ -51,7 +51,7 @@ export default class ManagementApp extends Component {
       );
     } else if (connector.management.paymentMethods) {
       children.push((
-        <ManageCards {...boundMgmtActions}
+        <PayMethods {...boundMgmtActions}
           paymentMethods={connector.management.paymentMethods} />
       ));
     }

public/js/views/add-pay-method.jsx

@@ -0,0 +1,22 @@
+import React, { Component, PropTypes } from 'react';
+
+import Modal from 'components/modal';
+import CardDetails from 'views/card-details';
+
+
+export default class AddPayMethod extends Component {
+
+  static propTypes = {
+    closeModal: PropTypes.func.isRequired,
+  };
+
+  render() {
+    return (
+      <Modal handleClose={this.props.closeModal}>
+        <CardDetails />
+      </Modal>
+    );
+  }
+
+}
+

public/js/views/pay-methods.jsx

@@ -6,19 +6,30 @@ import CardList from 'components/card-list';
 import { gettext } from 'utils';
 
 
-export default class ManageCards extends Component {
+export default class PayMethods extends Component {
 
   static propTypes = {
     closeModal: PropTypes.func.isRequired,
     paymentMethods: PropTypes.array.isRequired,
   };
 
+  renderChild() {
+    if (this.props.paymentMethods && this.props.paymentMethods.length) {
+      return <CardList cards={this.props.paymentMethods} />;
+    }
+    return (<p className="no-results">
+      {gettext("You haven't added have any credit cards yet")}
+    </p>);
+  }
+
   render() {
     return (
       <Modal
         handleClose={this.props.closeModal}
         title={gettext('Payment Methods')}>
-        <CardList cards={this.props.paymentMethods} />
+        <div>
+          {this.renderChild()}
+        </div>
       </Modal>
     );
   }

public/scss/_pay-methods.scss

@@ -0,0 +1,12 @@
+.no-results {
+  text-align: center;
+  padding: 2em 0;
+}
+
+.add-card {
+  float: left;
+}
+
+.delete {
+  float: right;
+}

public/scss/main.scss

@@ -19,4 +19,5 @@
 @import '_modal';
 
 @import '_card-listing';
+@import '_pay-methods';
 @import '_complete-payment';

tests/test.pay-methods.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import TestUtils from 'react/lib/ReactTestUtils';
+
+import PayMethods from 'views/pay-methods';
+
+import * as helpers from './helpers';
+
+
+describe('PayMethods', function() {
+
+  beforeEach(function() {
+    const fakeCards = [
+      {
+        'id': 1,
+        'resource_uri': 'something',
+        'truncated_id': '4321',
+        'type_name': 'visa',
+      }, {
+        'id': 2,
+        'resource_uri': 'whatever',
+        'truncated_id': '1234',
+        'type_name': 'amex',
+      },
+    ];
+
+    this.PayMethods = TestUtils.renderIntoDocument(
+      <PayMethods paymentMethods={fakeCards} />
+    );
+  });
+
+  it('should have a visa card present', function() {
+    var content = helpers.findByClass(this.PayMethods, 'cctype-visa');
+    assert.ok(TestUtils.isDOMComponent(content));
+  });
+
+  it('should have an amex card present', function() {
+    var content = helpers.findByClass(this.PayMethods, 'cctype-amex');
+    assert.ok(TestUtils.isDOMComponent(content));
+  });
+
+  it('should show no-results message', function() {
+    var noPayMethods = TestUtils.renderIntoDocument(
+      <PayMethods paymentMethods={[]} />
+    );
+    var content = helpers.findByClass(noPayMethods, 'no-results');
+    assert.ok(TestUtils.isDOMComponent(content));
+  });
+
+});