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

     1  'use strict';
     2  
     3  import React, { Props } from 'react';
     4  import PropTypes from 'prop-types';
     5  import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
     6  import { connect } from 'react-redux';
     7  import { bindActionCreators } from 'redux';
     8  import { withRouter, Link } from 'react-router-dom';
     9  
    10  import Loading from '../../../shared/Loading';
    11  import * as contractTemplateActions from '../../actions/contractTemplateActions';
    12  
    13  const ContractTemplatesPage = ({
    14    loading, contractTypes, intl, contractTemplateActions }) => {
    15    const contractTemplateRows = Array.isArray(contractTypes) ? contractTypes
    16      .sort((a, b) => a.description.localeCompare(b.description))
    17      .map((contractType, index) => (
    18        <tr key={index}
    19          ref={row => {
    20            jQuery(row).tooltip({
    21              content: `<b>Contract Terms:</b> <br />${contractType.conditions}`
    22            });
    23          }}>
    24          <td>{activateIcon(contractType)}</td>
    25          <td>{contractType.description}</td>
    26          <td>{formatShopTypes(contractType)}</td>
    27          <td><FormattedMessage id={
    28            contractType.theftInsured ? 'Present' : 'Not Included'} /></td>
    29          <td>{contractType.minDurationDays}</td>
    30          <td>{contractType.maxDurationDays}</td>
    31        </tr>
    32      )) : null;
    33    function activateIcon(contractType) {
    34      const activate = () => {
    35        contractTemplateActions.setContractTypeActive(contractType.uuid, true);
    36      };
    37      const deactivate = () => {
    38        contractTemplateActions.setContractTypeActive(
    39          contractType.uuid, false);
    40      };
    41      let activateButton = (
    42        <button type='button'
    43          className='ibm-btn-sec ibm-btn-small ibm-btn-green-50'
    44          style={{ marginLeft: '5px', marginRight: '5px' }}
    45          onClick={activate}>
    46          <FormattedMessage id='Activate' />
    47        </button>
    48      );
    49      let deactivateButton = (
    50        <button type='button' className='ibm-btn-sec ibm-btn-small ibm-btn-red-50'
    51          style={{ marginLeft: '5px', marginRight: '5px' }}
    52          onClick={deactivate}>
    53          <FormattedMessage id='Deactivate' />
    54        </button>
    55      );
    56      return contractType.active ? deactivateButton : activateButton;
    57    }
    58    function formatShopTypes(contractType) {
    59      let { shopType } = contractType;
    60      if (typeof shopType !== 'string') {
    61        return shopType;
    62      }
    63      shopType = contractType.shopType.toUpperCase();
    64      return shopType.split('').map(l => {
    65        switch (l) {
    66          case 'B': return intl.formatMessage({ id: 'Bike Shops' });
    67          case 'P': return intl.formatMessage({ id: 'Phone Shops' });
    68          case 'S': return intl.formatMessage({ id: 'Ski Shops' });
    69          default: return;
    70        }
    71      }).join(', ');
    72    }
    73  
    74    return (
    75      <Loading hidden={!loading}
    76        text={intl.formatMessage({ id: 'Loading contract types...' })}>
    77        <div className='ibm-columns' style={{ minHeight: '30vh' }}>
    78          <div className='ibm-col-1-1'>
    79            <h3 className='ibm-h3'>
    80              <FormattedMessage id='Contract Templates' />
    81            </h3>
    82          </div>
    83          <div style={{ marginTop: '10px', marginBottom: '20px' }}
    84            className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
    85            <Link type='button' className='ibm-btn-sec ibm-btn-blue-50'
    86              to='/contract-management/new-contract-template'>
    87              <FormattedMessage id='Create Contract Template' />
    88            </Link>
    89          </div>
    90          <div className='ibm-col-1-1'>
    91            <table className='ibm-data-table ibm-altcols'>
    92              <thead>
    93                <tr>
    94                  <th><FormattedMessage id='Status' /></th>
    95                  <th><FormattedMessage id='Description' /></th>
    96                  <th><FormattedMessage id='Availability to Merchants' /></th>
    97                  <th><FormattedMessage id='Theft Insured' /></th>
    98                  <th><FormattedMessage id='Min. Duration (days)' /></th>
    99                  <th><FormattedMessage id='Max. Duration (days)' /></th>
   100                </tr>
   101              </thead>
   102              <tbody>
   103                {contractTemplateRows}
   104              </tbody>
   105            </table>
   106          </div>
   107        </div>
   108      </Loading>
   109    );
   110  };
   111  
   112  ContractTemplatesPage.propTypes = {
   113    intl: intlShape.isRequired,
   114    contractTypes: PropTypes.array,
   115    loading: PropTypes.bool.isRequired,
   116    contractTemplateActions: PropTypes.object.isRequired
   117  };
   118  
   119  function mapStateToProps(state, ownProps) {
   120    return {
   121      contractTypes: state.contractTemplates.contractTypes,
   122      loading: !Array.isArray(state.contractTemplates.contractTypes)
   123    };
   124  }
   125  
   126  function mapDispatchToProps(dispatch) {
   127    return {
   128      contractTemplateActions: bindActionCreators(
   129        contractTemplateActions, dispatch)
   130    };
   131  }
   132  
   133  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(
   134    injectIntl(ContractTemplatesPage)));