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

     1  'use strict';
     2  
     3  import React, { Props } from 'react';
     4  import PropTypes from 'prop-types';
     5  import {
     6    FormattedMessage, FormattedDate, FormattedNumber,
     7    injectIntl, intlShape
     8  } from 'react-intl';
     9  import { connect } from 'react-redux';
    10  import { withRouter, Redirect } from 'react-router-dom';
    11  
    12  class ContractClaimsPage extends React.Component {
    13  
    14    static get propTypes() {
    15      return {
    16        intl: intlShape.isRequired,
    17        user: PropTypes.object,
    18        contracts: PropTypes.array.isRequired,
    19        match: PropTypes.shape({
    20          params: PropTypes.shape({
    21            contractUuid: PropTypes.string.isRequired
    22          })
    23        }).isRequired
    24      };
    25    }
    26  
    27    constructor(props) {
    28      super(props);
    29    }
    30  
    31    render() {
    32      const { contracts, intl, user } = this.props;
    33      const { contractUuid } = this.props.match.params;
    34  
    35      const { claims } = Array.isArray(contracts) ?
    36        contracts.find(c => c.uuid == contractUuid) || {} : {};
    37  
    38      if (!user) {
    39        return (
    40          <Redirect to='/self-service' />
    41        );
    42      }
    43  
    44      function formatStatus(claim) {
    45        if (!claim) {
    46          return null;
    47        }
    48        let message, messageId, reimbursable;
    49        switch (claim.status) {
    50          case 'N':
    51            messageId = claim.isTheft ? 'Expecting confirmation from police'
    52              : 'Being Processed';
    53            break;
    54          case 'R':
    55            messageId = claim.repaired ? 'Repaired' : 'To be repaired';
    56            break;
    57          case 'F':
    58            messageId = 'Reimbursement';
    59            reimbursable = <span>
    60              , <FormattedNumber style='currency'
    61                currency={intl.formatMessage({ id: 'currency code' })}
    62                value={claim.reimbursable} minimumFractionDigits={2} />
    63            </span>;
    64            break;
    65          case 'P':
    66            messageId = 'Theft confirmed by police';
    67            break;
    68          case 'J':
    69            messageId = 'Rejected';
    70            break;
    71          default:
    72            messageId = 'Unknown';
    73        }
    74        if (messageId) {
    75          message = <FormattedMessage id={messageId} />;
    76        }
    77        let fileReference;
    78        if (claim.isTheft && claim.fileReference) {
    79          fileReference = (
    80            <span>
    81              , <FormattedMessage id='File Reference' />: {claim.fileReference}
    82            </span>
    83          );
    84        }
    85        return (
    86          <span>{message}{fileReference}{reimbursable}</span>
    87        );
    88      }
    89      const cards = Array.isArray(claims) ? claims.map((claim, index) => (
    90        <div key={index} className='ibm-col-5-2 ibm-col-medium-6-2'>
    91          <div className='ibm-card ibm-border-gray-50'>
    92            <div className='ibm-card__content'>
    93              <h4 className='ibm-bold ibm-h4'>{claim.description}</h4>
    94              <div style={{ wordWrap: 'break-word' }}>
    95                <FormattedMessage id='Creation Date' />:
    96                <FormattedDate value={claim.date} /> <br />
    97                <FormattedMessage id='Theft' />:
    98                <input type='checkbox' ref='theftField'
    99                  className='ibm-styled-checkbox' checked={claim.isTheft} />
   100                <label className='ibm-field-label' htmlFor='theftField' /><br />
   101                <FormattedMessage id='Description' />: {claim.description}<br />
   102                <FormattedMessage id='Status' />: {formatStatus(claim)}
   103              </div>
   104              <br />
   105            </div>
   106          </div>
   107        </div>
   108      )) : (
   109          <div className='ibm-col-5-5 ibm-col-medium-6-6'>
   110            <FormattedMessage id={`You haven't filed any claims yet.`} />
   111          </div>
   112        );
   113      return (
   114        <div style={{ minHeight: '30vh' }}>
   115          <div className='ibm-columns'>
   116            <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
   117              <h3 className='ibm-h3'>
   118                <FormattedMessage id='Claims to Selected Contract' />
   119              </h3>
   120            </div>
   121          </div>
   122          <div className='ibm-columns ibm-cards' data-widget='masonry'
   123            data-items='.ibm-col-5-1'>
   124            {cards}
   125          </div>
   126        </div>
   127      );
   128    }
   129  }
   130  
   131  function mapStateToProps(state, ownProps) {
   132    return {
   133      user: state.userMgmt.user,
   134      contracts: state.contracts
   135    };
   136  }
   137  
   138  export default withRouter(connect(mapStateToProps)(
   139    injectIntl(ContractClaimsPage)));