payment.jsx

import React from 'react';
import Scroll from 'react-scroll';

export default class Component extends React.Component {
  state = {showNew: false};

  save = (step, card) => {
    let update = {step, type: 'SET_CHECKOUT'};
    if (card) {
      update.payment = card;
    }
    this.props.dispatch(update);
    Scroll.scroller.scrollTo((step).toString(), {smooth: true, duration: 500});
  }

  render() {
    return (
  <div>
    {_.map(this.props.user.cards, (card, i) => {
      return <Card {...this.props} key={i} card={card}
        onSelect={(e) => {e.preventDefault(); this.save(this.props.checkout.step + 1, card)}} />
    })}
    <a href="#" onClick={(e) => {e.preventDefault(); this.setState({showNew: true})}}>
      <div style={{border: '1px solid #ddd', padding: '20px 20px', lineHeight: '20px', color: '#444', height: '62px', fontFamily: 'Montserrat,sans-serif'}}>
        <span>Enter New</span>
      </div>
    </a>
    {this.state.showNew ?
        <form className="checkout-form" style={{marginTop: '20px'}}>
          <div className="__inputs">
            <div className="__item item-2-col"><span>
              <input type="text" placeholder="Credit Card Number" style={{marginBottom: '10px'}} /></span></div>
            <div className="__item"><span>
              <input type="text" placeholder="Month" style={{marginBottom: '10px'}} /></span></div>
            <div className="__item item-2-col"><span>
              <input type="text" placeholder="CVC" style={{marginBottom: '10px'}} /></span></div>
            <div className="__item item-2-col"><span>
              <input type="text" placeholder="Zip" style={{marginBottom: '10px'}} /></span></div>
          </div>
        </form>
      : null }
      <div style={{marginTop: '10px'}}>
        <button className="btn btn-primary no-border" style={{float: 'left'}} onClick={() => this.save(this.props.checkout.step - 1)}>BACK</button>
        <button className="btn btn-primary no-border" style={{float: 'right'}} onClick={() => this.save(this.props.checkout.step + 1)}>NEXT</button>
      </div>
  </div>
  )
  }
}

const Card = (props) => {
  let style = {border: '1px solid #ddd', padding: '20px 20px', lineHeight: '20px', color: '#444', minHeight: '62px', fontFamily: 'Montserrat,sans-serif'};
  if (props.checkout.payment && props.checkout.payment.id == props.card.id) {
    style.backgroundColor = '#2196f3';
    style.color = '#fff';
  }
  return (
  <a href="#" onClick={props.onSelect} >
    <div style={style}>
      <label style={{width: '100%'}}>
        <span style={{width: '100%', paddingLeft: '20px'}}>
          <span style={{paddingTop: '5px', paddingRight: '10px', fontSize: '20px'}}><i className={cardTypes[props.card.brand]} /></span>
          <span>CARD ENDING {props.card.last4}</span>
        </span>
      </label>
    </div>
  </a>
  )
}

const cardTypes = {
  Visa: 'fa fa-cc-visa',
  Mastercard: 'fa fa-cc-mastercard',
  'American Express': 'fa fa-cc-amex',
  Discover: 'fa fa-cc-discover',
}