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

     1  'use strict';
     2  
     3  import React, { Props } from 'react';
     4  import PropTypes from 'prop-types';
     5  import { bindActionCreators } from 'redux';
     6  import {
     7    FormattedMessage, FormattedDate,
     8    injectIntl, intlShape
     9  } from 'react-intl';
    10  import { connect } from 'react-redux';
    11  import { withRouter, Link, Redirect } from 'react-router-dom';
    12  
    13  import Loading from '../../../shared/Loading';
    14  import * as contractsActions from '../../actions/contractsActions';
    15  
    16  class ContractsPage extends React.Component {
    17  
    18    static get propTypes() {
    19      return {
    20        intl: intlShape.isRequired,
    21        user: PropTypes.object,
    22        contracts: PropTypes.array,
    23        contractsActions: PropTypes.object.isRequired
    24      };
    25    }
    26  
    27    constructor(props) {
    28      super(props);
    29  
    30      this.state = { loading: true };
    31      if (typeof props.user === 'object') {
    32        props.contractsActions.loadContracts(props.user);
    33      }
    34    }
    35  
    36    componentWillReceiveProps(nextProps) {
    37      if (Array.isArray(nextProps.contracts)) {
    38        this.setState({ loading: false });
    39      }
    40    }
    41  
    42    render() {
    43      const { loading } = this.state;
    44      const { contracts, intl, user } = this.props;
    45  
    46      if (!user) {
    47        return (
    48          <Redirect to='/self-service' />
    49        );
    50      }
    51  
    52      function showExpirationInfo(contract) {
    53        if (contract.void) {
    54          return (
    55            <FormattedMessage style={{ color: 'red' }} id='Contract void' />
    56          );
    57        }
    58        return (
    59          <div>
    60            <FormattedMessage id='Valid From' />:
    61            <FormattedDate value={contract.startDate} /> <br />
    62            <FormattedMessage id='Valid To' />:
    63            <FormattedDate value={contract.endDate} /> <br />
    64          </div>
    65        );
    66      }
    67      function claimButtons(contract) {
    68        let fileClaim = !contract.void ?
    69          (
    70            <p className='ibm-ind-link'>
    71              <Link className='ibm-forward-link'
    72                to={`/self-service/claim/${contract.uuid}`}>
    73                <FormattedMessage id='File a New Claim' />
    74              </Link>
    75            </p>
    76          ) : <FormattedMessage style={{ color: 'red' }} id='Contract void' />;
    77  
    78        return (
    79          <div>
    80            {fileClaim}
    81            <p className='ibm-ind-link'>
    82              <Link className='ibm-forward-link'
    83                to={`/self-service/contract/${contract.uuid}/claims`}>
    84                <FormattedMessage id='View Claims' />
    85                ({(contract.claims || []).length})
    86                </Link>
    87            </p>
    88          </div>
    89        );
    90      }
    91  
    92      const cards = Array.isArray(contracts) ? contracts.map(
    93        (contract, index) => (
    94          <div key={index} className='ibm-col-5-1 ibm-col-medium-6-2'>
    95            <div className='ibm-card ibm-border-gray-50'>
    96              <div className='ibm-card__content'>
    97                <h4 className='ibm-bold ibm-h4'>{contract.description}</h4>
    98                <div style={{ wordWrap: 'break-word' }}>
    99                  <FormattedMessage id='Brand' />: {contract.item.brand}<br />
   100                  <FormattedMessage id='Model' />: {contract.item.model}<br />
   101                  <FormattedMessage id='Serial No.' />: {contract.item.serialNo}
   102                  <br />
   103                  {showExpirationInfo(contract)}
   104                </div>
   105                <br />
   106                {claimButtons(contract)}
   107              </div>
   108            </div>
   109          </div>
   110        )) : null;
   111  
   112      return (
   113        <Loading hidden={!loading}
   114          text={intl.formatMessage({ id: 'Loading Contracts...' })}>
   115          <div className='ibm-columns' style={{ minHeight: '6em' }}>
   116            <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
   117              <h3 className='ibm-h3'><FormattedMessage id='Your Contracts' /></h3>
   118            </div>
   119            <div className='ibm-columns ibm-cards' data-widget='masonry'
   120              data-items='.ibm-col-5-1'>
   121              {cards}
   122            </div>
   123          </div>
   124        </Loading>
   125      );
   126    }
   127  }
   128  
   129  function mapStateToProps(state, ownProps) {
   130    return {
   131      user: state.userMgmt.user,
   132      contracts: state.contracts
   133    };
   134  }
   135  
   136  function mapDispatchToProps(dispatch) {
   137    return {
   138      contractsActions: bindActionCreators(contractsActions, dispatch)
   139    };
   140  }
   141  
   142  export default withRouter(connect(
   143    mapStateToProps, mapDispatchToProps)(injectIntl(ContractsPage)));