creditcardvalidation.js

import {Button, Card, Form, Grid, Icon, Input, Message, Popup} from 'semantic-ui-react';
import CreditCardFormConstants from '../CreditCardFormConstants';
import ErrorMessage from './ErrorMessage';
import React, { Component } from 'react';

const {BUTTON_SUBMIT, CARD, DESCRIPTION, LABELS, PLACEHOLDERS} = CreditCardFormConstants;
const date = new Date();
const currentMonth = date.getMonth().toString();
const currentYear = date.getFullYear().toString();

class CreditCardForm extends React.Component {
  state = {
    cardType: '',
    cvv: '',
    displaySuccessMessage: false,
    expMonth: '',
    expYear: '',
    name: '',
    number: '',
  }

  handleInputChange = (e, {name, value}) => {
    switch(name) {
      case 'name':
        this.setState({ name: value });
        break;
      case 'number':
        this.setState({
          number: value,
        }, () => {
          if (value[0] == 4) {
            this.setState({
              cardType: CARD.TYPE_VISA,
            })
          } else if (value[0] == 3 && (value[1] == 4 || value[1] == 7)) {
            this.setState({
              cardType: CARD.TYPE_AMEX,
            })
          }
        });
        break;
      case 'cvv':
        this.setState({ [name]: value });
        break;
      case 'expMonth':
        this.setState({ [name]: value });
        break;
      case 'expYear':
        this.setState({ [name]: value });
        break;
    }
  }

  // reset on submit
  handleSubmit = () => {
    this.setState({
      cardType: '',
      cvv: '',
      displaySuccessMessage: false,
      expMonth: '',
      expYear: '',
      name: '',
      number: '',
    });
  }

  render() {
    const {
      cardType,
      cvv,
      displaySuccessMessage,
      expMonth,
      expYear,
      name,
      number,
    } = this.state;

    return (
      <Card centered raised style={{marginTop: '30px'}}>
        <Grid centered columns={1} padded='vertically'>
          <Grid.Row>
            <Form
              onSubmit={this.handleSubmit}
              success={true}
            >
              {displaySuccessMessage &&
                <Message success header="Valid Information" content="Good to go!"/>
              }
              <div align="center" style={{marginBottom: '10px'}}>{DESCRIPTION}</div>
              <Form.Input
                required
                label={LABELS.LABEL_CARD_HOLDER_NAME}
                placeholder={PLACEHOLDERS.PLACEHOLDER_CARD_HOLDER_NAME}
                name='name'
                value={name}
                onChange={this.handleInputChange}
              />
              <Form.Input
                required
                label={LABELS.LABEL_CARD_NUMBER}
                maxLength={
                  cardType == CARD.TYPE_VISA
                  ? CARD.MAX_NUMBER_LENGTH_VISA : CARD.MAX_NUMBER_LENGTH_AMEX
                }
                placeholder={PLACEHOLDERS.PLACEHOLDER_CARD_NUMBER}
                name='number'
                value={number}
                onChange={this.handleInputChange}
              />
              <Form.Input
                required
                label={LABELS.LABEL_CVV}
                maxLength={
                  cardType == CARD.TYPE_VISA
                  ? CARD.MAX_CVV_LENGTH_VISA : CARD.MAX_CVV_LENGTH_AMEX
                }
                placeholder={PLACEHOLDERS.PLACEHOLDER_CVV}
                name='cvv'
                value={cvv}
                onChange={this.handleInputChange}
              />
              <Form.Group widths='equal'>
                <Form.Input
                  required
                  fluid
                  maxLength='2'
                  label={LABELS.LABEL_EXP_MONTH}
                  placeholder={PLACEHOLDERS.PLACEHOLDER_EXP_MONTH}
                  name='expMonth'
                  value={expMonth}
                  onChange={this.handleInputChange}
                />
                <Form.Input
                  required
                  fluid
                  maxLength='2'
                  label={LABELS.LABEL_EXP_YEAR}
                  placeholder={PLACEHOLDERS.PLACEHOLDER_EXP_YEAR}
                  name='expYear'
                  value={expYear}
                  onChange={this.handleInputChange}
                />
              </Form.Group>
              <div style={{marginBottom: '10px'}}>
                <Icon
                  size='huge'
                  color={cardType == CARD.TYPE_VISA ? 'yellow' : 'grey'}
                  name='cc visa'
                />
                <Icon
                  size='huge'
                  color={cardType == CARD.TYPE_AMEX ? 'yellow' : 'grey'}
                  name='cc amex'
                />
              </div>
              <Form.Button
                fluid
                content={BUTTON_SUBMIT}
                color="green"
                type="submit"
                disabled={
                  !name || !number || !cvv || !expMonth || !expYear
                }
              />
            </Form>
          </Grid.Row>
        </Grid>
      </Card>
    )
  }
}

export default CreditCardForm;