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

     1  'use strict';
     2  
     3  import React, { Props } from 'react';
     4  import PropTypes from 'prop-types';
     5  import { FormattedMessage } from 'react-intl';
     6  
     7  class TheftClaimComponent extends React.Component {
     8  
     9    static get propTypes() {
    10      return {
    11        theftClaim: PropTypes.object.isRequired,
    12        onProcessedClaim: PropTypes.func.isRequired
    13      };
    14    }
    15  
    16    constructor(props) {
    17      super(props);
    18  
    19      this.state = {
    20        fileReference: ''
    21      };
    22  
    23      this.confirmClaim = this.confirmClaim.bind(this);
    24      this.rejectClaim = this.rejectClaim.bind(this);
    25      this.processClaim = this.processClaim.bind(this);
    26      this.setFileReference = this.setFileReference.bind(this);
    27    }
    28  
    29    setFileReference(e) {
    30      const { value } = e.target;
    31      this.setState({ fileReference: value.toUpperCase() });
    32    }
    33  
    34    confirmClaim() {
    35      this.processClaim(true);
    36    }
    37  
    38    rejectClaim() {
    39      this.processClaim(false);
    40    }
    41  
    42    processClaim(isTheft) {
    43      const { theftClaim, onProcessedClaim } = this.props;
    44      const { fileReference } = this.state;
    45      if (typeof onProcessedClaim === 'function') {
    46        setTimeout(() => {
    47          onProcessedClaim({
    48            uuid: theftClaim.uuid,
    49            contractUuid: theftClaim.contractUuid,
    50            isTheft,
    51            fileReference
    52          });
    53        });
    54      }
    55    }
    56  
    57    render() {
    58      const { theftClaim } = this.props;
    59      const { fileReference } = this.state;
    60      return (
    61        <div className='ibm-col-6-2 ibm-col-medium-2-1 ibm-col-small-1-1'>
    62          <div className='ibm-card ibm-border-gray-50'>
    63            <div className='ibm-card__content'>
    64              <h4 className='ibm-bold ibm-h4'>
    65                <FormattedMessage id='Theft Claim' />
    66              </h4>
    67              <div className='ibm-column-form' style={{ wordWrap: 'break-word' }}>
    68                <p>
    69                  <label><FormattedMessage id='Name' />:</label>
    70                  <span>{theftClaim.name}</span>
    71                </p>
    72                <p>
    73                  <label><FormattedMessage id='Brand' />:</label>
    74                  <span>{theftClaim.item.brand}</span>
    75                </p>
    76                <p>
    77                  <label><FormattedMessage id='Model' />:</label>
    78                  <span>{theftClaim.item.model}</span>
    79                </p>
    80                <p>
    81                  <label><FormattedMessage id='Serial No.' />:</label>
    82                  <span>{theftClaim.item.serialNo}</span>
    83                </p>
    84                <p>
    85                  <label><FormattedMessage id='Description' />:</label>
    86                  <span>{theftClaim.description}</span>
    87                </p>
    88                <p>
    89                  <label><FormattedMessage id='File Reference' />:</label>
    90                  <span>
    91                    <input type='text'
    92                      value={fileReference} onChange={this.setFileReference} />
    93                  </span>
    94                </p>
    95                <div>
    96                  <button type='button'
    97                    className='ibm-btn-sec ibm-btn-small ibm-btn-blue-50'
    98                    style={{ marginLeft: '15px', marginRight: '15px' }}
    99                    onClick={this.confirmClaim}>
   100                    <FormattedMessage id='Confirm' />
   101                  </button>
   102                  <button type='button'
   103                    className='ibm-btn-sec ibm-btn-small ibm-btn-red-50'
   104                    style={{ marginLeft: '15px', marginRight: '15px' }}
   105                    onClick={this.rejectClaim}>
   106                    <FormattedMessage id='Reject' />
   107                  </button>
   108                </div>
   109              </div>
   110              <br />
   111            </div>
   112          </div>
   113        </div>
   114      );
   115    }
   116  }
   117  
   118  export default TheftClaimComponent;