github.com/muhammedhassanm/blockchain@v0.0.0-20200120143007-697261defd4d/build-blockchain-insurance-app-master/web/src/insurance/components/claim-processing/ClaimComponent.js (about)

     1  import React, { Props } from 'react';
     2  import PropTypes from 'prop-types';
     3  import { FormattedDate, FormattedMessage } from 'react-intl';
     4  
     5  class ClaimComponent extends React.Component {
     6  
     7    static get propTypes() {
     8      return {
     9        claim: PropTypes.object.isRequired,
    10        onRepair: PropTypes.func.isRequired,
    11        onReimburse: PropTypes.func.isRequired,
    12        onReject: PropTypes.func.isRequired
    13      };
    14    }
    15  
    16    constructor(props) {
    17      super(props);
    18  
    19      this.state = { reimbursable: 0 };
    20      this.setReimbursable = this.setReimbursable.bind(this);
    21      this.repair = this.repair.bind(this);
    22      this.reimburse = this.reimburse.bind(this);
    23      this.reject = this.reject.bind(this);
    24    }
    25  
    26    setReimbursable(e) {
    27      let { value } = e.target;
    28      if (value) {
    29        value = Number(value) ? value : 0;
    30      }
    31      this.setState({ reimbursable: value });
    32    }
    33  
    34    repair() {
    35      const { onRepair } = this.props;
    36      onRepair();
    37    }
    38  
    39    reimburse() {
    40      const { onReimburse } = this.props;
    41      const { reimbursable } = this.state;
    42      onReimburse(Number(reimbursable));
    43    }
    44  
    45    reject() {
    46      const { onReject } = this.props;
    47      onReject();
    48    }
    49  
    50    render() {
    51      const { claim } = this.props;
    52      const { reimbursable } = this.state;
    53  
    54      const claimButtons = c => {
    55        const repairButton = c.isTheft ? null : (
    56          <button key='repairButton' type='button'
    57            className='ibm-btn-sec ibm-btn-small ibm-btn-blue-50'
    58            style={{ marginLeft: '15px', marginRight: '15px' }}
    59            onClick={this.repair}>
    60            <FormattedMessage id='Repair' />
    61          </button>
    62        );
    63        const reimburseButton = c.isTheft && c.status !== 'P' ? null : (
    64          <button key='reimburseButton' type='button'
    65            className='ibm-btn-sec ibm-btn-small ibm-btn-teal-50'
    66            style={{ marginLeft: '15px', marginRight: '15px' }}
    67            onClick={this.reimburse}>
    68            <FormattedMessage id='Reimburse' />
    69          </button>
    70        );
    71        const rejectButton = (
    72          <button key='rejectButton' type='button'
    73            className='ibm-btn-sec ibm-btn-small ibm-btn-red-50'
    74            style={{ marginLeft: '15px', marginRight: '15px' }}
    75            onClick={this.reject}>
    76            <FormattedMessage id='Reject' />
    77          </button>
    78        );
    79        return (
    80          <div>
    81            {[repairButton, reimburseButton, rejectButton]}
    82          </div>
    83        );
    84      };
    85  
    86      return (
    87        <div className='ibm-col-2-1 ibm-col-medium-2-1 ibm-col-small-1-1'>
    88          <div className='ibm-card ibm-border-gray-50'>
    89            <div className='ibm-card__content'>
    90              <h4 className='ibm-bold ibm-h4'>{claim.description}</h4>
    91              <div style={{ wordWrap: 'break-word' }} className='ibm-column-form'>
    92                <p>
    93                  <label><FormattedMessage id='Description' />: </label>
    94                  <span>{claim.description}</span>
    95                </p>
    96                <p>
    97                  <label><FormattedMessage id='Creation Date' />: </label>
    98                  <span><FormattedDate value={claim.date} /></span>
    99                </p>
   100                <p>
   101                  <label><FormattedMessage id='Theft Involved' />: </label>
   102                  <span className='ibm-input-group'>
   103                    <input type='checkbox' className='ibm-styled-checkbox'
   104                      ref='theftField' checked={claim.isTheft}
   105                      readOnly disabled />
   106                    <label className='ibm-field-label' htmlFor='theftField' />
   107                  </span>
   108                </p>
   109                <p>
   110                  <label><FormattedMessage id='Reimbursable' />: </label>
   111                  <span>
   112                    <input type='text'
   113                      value={reimbursable} onChange={this.setReimbursable} />
   114                  </span>
   115                </p>
   116              </div>
   117              {claimButtons(claim)}
   118            </div>
   119          </div>
   120        </div>
   121      );
   122    }
   123  }
   124  
   125  export default ClaimComponent;