github.com/muhammedhassanm/blockchain@v0.0.0-20200120143007-697261defd4d/build-blockchain-insurance-app-master/web/src/shop/components/ChooseProductPage.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 { bindActionCreators } from 'redux';
     7  import { connect } from 'react-redux';
     8  import { withRouter, Redirect } from 'react-router-dom';
     9  
    10  import * as shopActions from '../actions/shopActions';
    11  import ProductCarousel from './ProductCarousel';
    12  
    13  class ChooseProductPage extends React.Component {
    14  
    15    static get propTypes() {
    16      return {
    17        intl: intlShape.isRequired,
    18        shopType: PropTypes.string.isRequired,
    19        products: PropTypes.array.isRequired,
    20        productInfo: PropTypes.object,
    21        shopActions: PropTypes.object.isRequired,
    22        history: PropTypes.object.isRequired
    23      };
    24    }
    25  
    26    constructor(props) {
    27      super(props);
    28      this.state = {
    29        productInfo: props.productInfo || {}
    30      };
    31  
    32      this.selectProduct = this.selectProduct.bind(this);
    33      this.nextStep = this.nextStep.bind(this);
    34      this.onSerialNoChanged = this.onSerialNoChanged.bind(this);
    35    }
    36  
    37    selectProduct(product) {
    38      let serialNo = generateSerialNo();
    39      this.setState({ productInfo: Object.assign({}, product, { serialNo }) });
    40    }
    41  
    42    nextStep() {
    43      // Persist data
    44      this.props.shopActions.submitProduct(this.state.productInfo);
    45      // Navigate to the next page
    46      this.setState({ redirectToNext: true });
    47    }
    48  
    49    onSerialNoChanged(event) {
    50      event.preventDefault();
    51      let serialNo = (event.target.value || '').toUpperCase();
    52      this.setState({
    53        productInfo: Object.assign(
    54          {}, this.state.productInfo, { serialNo })
    55      });
    56    }
    57  
    58    render() {
    59      let messageAtTop;
    60      switch (this.props.shopType) {
    61        case 'bikes':
    62          messageAtTop = <FormattedMessage id='Buy a Bike' />;
    63          break;
    64        case 'smart-phones':
    65          messageAtTop = <FormattedMessage id='Buy a Smart Phone' />;
    66          break;
    67        case 'skis':
    68          messageAtTop = <FormattedMessage id='Buy a Pair of Skis' />;
    69          break;
    70      }
    71      let { intl, products } = this.props;
    72      let { productInfo, redirectToNext } = this.state;
    73  
    74      if (redirectToNext) {
    75        return (
    76          <Redirect to='/insurance' />
    77        );
    78      }
    79  
    80      return (
    81        <div>
    82          <div>
    83            <div className='ibm-columns'>
    84              <div className='ibm-col-1-1'>
    85                <h3 className='ibm-h3'>{messageAtTop}</h3>
    86              </div>
    87            </div>
    88            <div className='ibm-columns'>
    89              <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
    90                <label><FormattedMessage id='Choose a Product' />:</label>
    91                <span>
    92                  <ProductCarousel products={products}
    93                    selectedProductIndex={productInfo.index}
    94                    onSelectedProduct={this.selectProduct} />
    95                </span>
    96              </div>
    97            </div>
    98            <div className='ibm-columns'>
    99              <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1'>
   100                <div className='ibm-column-form'>
   101                  <p>
   102                    <label><FormattedMessage id='Product Brand' />:</label>
   103                    <span>
   104                      <input type='text' readOnly value={productInfo.brand} />
   105                    </span>
   106                  </p>
   107                  <p>
   108                    <label><FormattedMessage id='Product Model' />:</label>
   109                    <span>
   110                      <input type='text' readOnly value={productInfo.model} />
   111                    </span>
   112                  </p>
   113                  <p>
   114                    <label><FormattedMessage id='Price' />:</label>
   115                    <span>
   116                      <input type='text' readOnly
   117                        value={intl.formatNumber(productInfo.price,
   118                          {
   119                            style: 'currency',
   120                            currency: intl.formatMessage({ id: 'currency code' }),
   121                            minimumFractionDigits: 2
   122                          })} />
   123                    </span>
   124                  </p>
   125                  <p>
   126                    <label><FormattedMessage id='Serial No.' />:</label>
   127                    <span>
   128                      <input type='text'
   129                        value={productInfo.serialNo}
   130                        onChange={this.onSerialNoChanged} />
   131                    </span>
   132                  </p>
   133                </div>
   134              </div>
   135            </div>
   136          </div>
   137          <div className='ibm-columns'>
   138            <div className='ibm-col-2-1 ibm-col-medium-5-3 ibm-col-small-1-1 ibm-right'>
   139              <button type='button' className='ibm-btn-pri ibm-btn-blue-50'
   140                onClick={this.nextStep}>
   141                <FormattedMessage id='Next' />
   142              </button>
   143            </div>
   144          </div>
   145        </div>
   146      );
   147    }
   148  }
   149  
   150  function generateSerialNo() {
   151    return Math.random().toString(36).substring(7).toUpperCase();
   152  }
   153  
   154  function mapStateToProps(state, ownProps) {
   155    return {
   156      shopType: state.shop.type,
   157      products: state.shop.products,
   158      productInfo: state.shop.productInfo
   159    };
   160  }
   161  
   162  function mapDispatchToProps(dispatch) {
   163    return {
   164      shopActions: bindActionCreators(shopActions, dispatch)
   165    };
   166  }
   167  
   168  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(
   169    injectIntl(ChooseProductPage)));