import React, { Component } from "react";
import SimpleReactValidator from "simple-react-validator";
import {BrowserRouter as Router, Redirect, Route} from 'react-router-dom';
import {connect} from 'react-redux';
import { bindActionCreators } from 'redux';

import fetchUserData from '../../store/actions/fetchUserData';
import resetAlert from '../../store/actions/resetAlert'

import TransactionHeader from "../pages/TransactionHeader";
import TransactionInfo from "../pages/TransactionInfo";
import TransferOffsite from "../pages/TransferOffsite";
import Alert from "../form/Alert";
import Receipt from "../pages/Receipt";
import Error from "../layout/Error";
import TransferOwnership from "../pages/TransferOwnership";
import Toast from "../form/Toast";
import {SET_STATE} from '../../store/actions/actionTypes';
import LoadingSpinner from "../ui/LoadingSpinner";

class MainForm extends Component {
  constructor(props) {
    super(props);
    this.validator = new SimpleReactValidator({ autoForceUpdate: this });
  }

  componentWillMount() {
    console.log("Component Did Mount");
    //this.props.fetchLocation();
    this.props.fetchUserData();
  }


  renderRedirect = () => {
    return <Redirect
      to={{
        pathname: `${window.StockControl.Constants.routeSearch}`,
        state: {
          from: `${window.StockControl.Constants.routeSearch}`,
          alerts: this.props.state.alerts,
          toasts: this.props.state.toasts
      }}}/>
  };

  renderSwitch(transactionType) {
    switch (transactionType) {
      //Transfer Onsite
      case "TO":
        return (
          <TransactionInfo
            validator={this.validator}
            />
        );
      //Transfer Offsite
      case "PH":
        return (
          <TransferOffsite
            validator={this.validator}
            />
        );
      //Receipt
      case "RE":
        return (
          <Receipt
            validator={this.validator}
            />
        );
      case "CO":
        return (
          <TransferOwnership
            validator={this.validator}
            />
        );
      default:
        return null;
    }
  }

  componentDidUpdate(prevProps, prevState, snapshot){
    const { alerts } = this.props.state;
    let timeoutString = window.StockControl.Constants.alertTimeout;
    let timeout = parseInt(timeoutString);
    let self = this;

    if(typeof alerts.msg !== 'undefined'){
      if (alerts.type === 'alert-success') {
        setTimeout(function(){
          let alertDiv =  document.getElementsByClassName('is-show');

          if(alertDiv && alertDiv.length === 1){
            alertDiv[0].classList.add('alert-content');
            alertDiv[0].classList.remove('is-show');
          }
          prevProps.resetAlert();
        },timeout);
      }
    }
  }

  render() {
    const { subTransactionType, transactionType, location, alerts, redirect, generalFormLabels, error, transactionOptions } = this.props.state;
    return error ? (
      <Error generalFormLabels={generalFormLabels} {...this.props.state} />
    ) : (
      !this.props.state.userAPiLoaded/*transactionApiLoaded*/ ? <LoadingSpinner /> :

      <React.Fragment>
        <div className="container">

        {(redirect)
          ? this.renderRedirect(transactionType)
          : null}


        {alerts.msg !== undefined && alerts.type !== undefined ? (
          <Alert className={alerts.type === 'alert-success' ? "alert-content is-show" : ''} variant={alerts.type}>{alerts.msg}</Alert>
        ) : null}

        {this.props.state.userAPiLoaded ? (
          <TransactionHeader
            //handleSelectChange={this.handleSelectChange}
            //handleInputChange={this.handleInputChange}
            //handleInputBlur={this.handleInputBlur}
            validator={this.validator}
            //handleSelectBlur={this.handleSelectBlur}
            selectHasError={this.selectHasError}
          />
        ) : (
          <LoadingSpinner />
        )}

        {(transactionType === "PH" || transactionType === "TO" || transactionType === "CO") && subTransactionType !== ""
          ? this.renderSwitch(transactionType)
          : null}
        {transactionType === "RE" ? this.renderSwitch(transactionType) : null}
        </div>
      </React.Fragment>
    );
  }
}

const mapStateToProps = (state) =>{
  return {
    state : state.getLocation_reducer,
  }
}

const mapDispatchToProps = (dispatch, validator) => bindActionCreators({
  fetchUserData : () => fetchUserData(validator),
  resetAlert : () => resetAlert()
}, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(MainForm);



-------------------------------------------------------------

import React from "react";
import {connect} from "react-redux";
import {bindActionCreators} from 'redux';

import Section from "../layout/Section";
import DocumentsList from "../ui/DocumentsList";
import DateTimePicker from "../form/DateTimePicker";
import Input from "../form/Input";
import Select from "../form/Select";
import TextArea from "../form/TextArea";
import MeterRowList from "../form/MeterRowList";
import ReviewPanelTransferOnsite from "../form/ReviewPanelTransferOnsite";
import Actions from "../form/Actions";
import Modal from "../form/Modal";

import handleSelectChange from '../../store/actions/handleSelectChange';
import handleInputChange from '../../store/actions/handleInputChange';
import handleInputFocus from '../../store/actions/handleInputFocus';
import handleInputBlur from '../../store/actions/handleInputBlur';
import handleInputKeyPress from '../../store/actions/handleInputKeyPress';
import handleSelectBlur from '../../store/actions/handleSelectBlur';
import handleTextAreaChange from '../../store/actions/handleTextAreaChange';
import handleCheckboxChange from '../../store/actions/handleCheckboxChange';
import handleDateChange from '../../store/actions/handleDateChange';
import handleModalClose from '../../store/actions/handleModalClose';
import handleDocumentTypeChange from '../../store/actions/handleDocumentTypeChange';
import handleAddDocumentClick from '../../store/actions/handleAddDocumentClick';
import handleRemove from '../../store/actions/handleRemove';
import handleDocumentFileInputChange from '../../store/actions/handleDocumentFileInputChange';
import handleButtonClick from '../../store/actions/handleButtonClick';
import handleResetDocumentList from '../../store/actions/handleResetDocumentList';
import showInvalidTimeModal from '../../store/actions/showInvalidTimeModal';
import validateStartTime from '../../store/actions/validateStartTime';
import validateEndTime from '../../store/actions/validateEndTime';
import selectHasError from '../../store/actions/selectHasError';
import determineDensityOrTemperatureHelpText from '../../store/actions/determineDensityOrTemperatureHelpText';
import isDensityStockControlValid from '../../store/actions/isDensityStockControlValid';
import getInitialDate from '../../store/actions/getInitialDate'
import genericStringReplacement from '../../store/actions/genericStringReplacement';
import determineDensityValidationRule from '../../store/actions/determineDensityValidationRule';
import stringReplacement from '../../store/actions/stringReplacement';
import formatDecimalByLocale from "../../store/actions/formatDecimalByLocale";

import 'bootstrap/js/dist/modal';
import 'bootstrap/scss/bootstrap.scss';
import Toast from "../form/Toast";

class TransactionInfo extends React.Component {
  constructor(props) {
    console.log('Props of Transaction Onsite', props);
    super(props);
    const documentListOptions = [];

    props.documentTypeData.map((documentList)=>{
      return(
        documentListOptions.push({
          value: documentList.Document_Type_Code,
          label: documentList.Document_Type_Name
        })
      )
    });
    this.documentListOptions = documentListOptions;
  }

  render() {
    const {
      receivingDeviceOptions,
      transactionPointOptions,
      fuelGradeOptions,
      operatorOptions,
      ambientTemprature,
      ambientDensity,
      standardDensity,
      totalAmbientVolume,
      documentTypeData,
      transferOnsiteLabels,
      detailsLabels,
      stockLabels,
      notesLabels,
      generalFormLabels,
      documentCounter,
      enableMultipleDocuments,
      selectedTransactionTypeLabel,
      selectedSubTransactionTypeLabel,
      dateTimeValidations,
      modal, 
      toasts,
      issuingDeviceOptions,
      selectValidations,
      VCF_Method,
      vehicleMetersData
    } = this.props;
  
    const validator = this.props.validator;
    return (
      <React.Fragment>
        <Section title={`${selectedTransactionTypeLabel} - ${selectedSubTransactionTypeLabel}`}>
          <Select
            name="transactionPoint"
            label={transferOnsiteLabels.transaction_point}
            options={transactionPointOptions}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            generalFormLabels={generalFormLabels}
            helpText={transferOnsiteLabels.transaction_point_tooltip}
            value={this.props.transactionPoint}
          />

          <Select
            name="fuelGrade"
            label={transferOnsiteLabels.fuel_grade}
            options={fuelGradeOptions}
            validationText={generalFormLabels.form_general_this_field_is_required}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            handleSelectBlur={this.props.handleSelectBlur}
            isError={this.props.selectHasError(fuelGradeOptions, this.props.selectValidations["fuelGrade"])}
            generalFormLabels={generalFormLabels}
            required={fuelGradeOptions.length > 1}
            value={this.props.fuelGrade}
          />

          <Select
            name="issuingDevice"
            label={transferOnsiteLabels.issuing_device}
            options={issuingDeviceOptions}
            validationText={generalFormLabels.form_general_this_field_is_required}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            handleSelectBlur={this.props.handleSelectBlur}
            isError={this.props.selectHasError(issuingDeviceOptions, this.props.selectValidations["issuingDevice"])}
            generalFormLabels={generalFormLabels}
            required={issuingDeviceOptions.length > 1}
            value={this.props.issuingDevice}
          />

          <Select
            name="receivingDevice"
            label={transferOnsiteLabels.receiving_device}
            options={receivingDeviceOptions}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            handleSelectBlur={this.props.handleSelectBlur}
            isError={this.props.selectHasError(receivingDeviceOptions, this.props.selectValidations["receivingDevice"])}
            validationText={generalFormLabels.form_general_this_field_is_required}
            generalFormLabels={generalFormLabels}
            required={receivingDeviceOptions.length > 1}
            value={this.props.receivingDevice}
          />

          <Input
            name="standNumber"
            label={transferOnsiteLabels.stand_number}
            size="short"
            handleInputChange={this.props.handleInputChange}
            required={this.props.pitOrStandRequired}
            validator={validator}
            validationText={generalFormLabels.form_general_this_field_alphanumeric}
            validationRule={this.props.pitOrStandRequired ? 'required|alpha_num' : ''}
            value={this.props.standNumber}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            requiredText={generalFormLabels.form_general_this_field_is_required}
            hideField={this.props.pitOrStandRequired ? false : true}
            inputType={this.props.pitOrStandRequired ? 'text' : 'hidden'}
            handleInputKeyPress={this.props.handleInputKeyPress}
            maxLength={4}
          />

          <Input
            name="pitNumber"
            label={transferOnsiteLabels.pit_number}
            size="short"
            requiredText={generalFormLabels.form_general_this_field_is_required}
            handleInputChange={this.props.handleInputChange}
            required={this.props.pitOrStandRequired}
            inputType={this.props.pitOrStandRequired ? 'text' : 'hidden'}
            hideField={this.props.pitOrStandRequired ? false : true}
            validator={validator}
            validationText={generalFormLabels.form_general_this_field_alphanumeric}
            validationRule={this.props.pitOrStandRequired ? 'required|alpha_num' : ''}
            value={this.props.pitNumber}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            handleInputKeyPress={this.props.handleInputKeyPress}
            maxLength={4}
          />

          <Select
            name="operator"
            label={transferOnsiteLabels.operator}
            options={operatorOptions}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            generalFormLabels={generalFormLabels}
            value={this.props.operator}
          />

        </Section>
        
        <Section title={detailsLabels.transaction_details}>
          <DateTimePicker
            name="start-date-time"
            label={detailsLabels.start_date_and}
            handleDateChange={this.props.handleDateChange}
            showInvalidTimeModal={this.props.showInvalidTimeModal}
            startDateField={this.props.startDateField}
            validateStartTime={this.props.validateStartTime}
            validationText={((dateTimeValidations.isStartTimeValid || dateTimeValidations.isStartTimeValid === '') && (dateTimeValidations.isStartDateValid || dateTimeValidations.isStartDateValid === '')) ? null : this.props.dateStartValidationText}
            timezone={this.props.timezoneOffset}
            getInitialDate={this.props.getInitialDate}
            required
            startTime={this.props.startTime}
            requiredText={dateTimeValidations.isStartTimeSet || dateTimeValidations.isStartTimeSet === '' ? null : generalFormLabels.form_general_this_field_is_required}
            dateFormatOption={this.props.userDateFormat || this.props.selected_SPL_Date_Format}
            loadedTransaction={this.props.loadedTransaction}
          />

          <DateTimePicker
            name="end-date-time"
            label={detailsLabels.end_date_and}
            handleDateChange={this.props.handleDateChange}
            showInvalidTimeModal={this.props.showInvalidTimeModal}
            endDateField={this.props.endDateField} 
            startDateField={this.props.startDateField}
            startTime={this.props.startTime}
            endTime={this.props.endTime}
            getInitialDate={this.props.getInitialDate}
            validateEndTime={this.props.validateEndTime}
            validationText={((dateTimeValidations.isEndTimeValid || dateTimeValidations.isEndTimeValid === '') && (dateTimeValidations.isEndDateValid || dateTimeValidations.isEndDateValid === '')) ? null : this.props.dateEndValidationText}
            required
            requiredText={dateTimeValidations.isEndTimeSet || dateTimeValidations.isEndTimeSet === '' ? null : generalFormLabels.form_general_this_field_is_required}
            timezone={this.props.timezoneOffset}
            dateFormatOption={this.props.userDateFormat || this.props.selected_SPL_Date_Format}
            loadedTransaction={this.props.loadedTransaction}
          />

          <Input 
            name="ambientTemprature" 
            label={detailsLabels.ambient_temperature}
            size="short" 
            required 
            uom={`${'º'}${this.props.tempUOM_Code}`}
            value={this.props.ambientTemprature === '-' ? '' : this.props.ambientTemprature}
            handleInputChange={this.props.handleInputChange}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            requiredText={generalFormLabels.form_general_this_field_is_required}
            validator={this.props.validator}
            validationRule={`required|max:${VCF_Method.Max_Temp},num|min:${VCF_Method.Min_Temp},num`}
            helpText={this.props.determineDensityOrTemperatureHelpText(window.StockControl.Constants.vcfTemperature)}
            validationText={this.props.genericStringReplacement(this.props.stockLabels.temperature_range_error, [VCF_Method.Min_Temp, VCF_Method.Max_Temp])}
            step=".01"
            handleInputFocus={this.props.handleInputFocus}
            handleInputKeyPress={this.props.handleInputKeyPress}
          />

          <Input
            name="ambientDensity"
            label={detailsLabels.ambient_density}
            size="short"
            uom={this.props.densityUOM_Code}
            value={this.props.ambientDensity === '-' ? '' : this.props.ambientDensity}
            handleInputChange={this.props.handleInputChange}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            fieldsetRowClassName={this.props.measuredDensityMethod !== 'A' && this.props.isVcfValid === false ? 'has-error-true' : null}
            requiredText={(this.props.ambientDensity || this.props.ambientDensity === '' || this.props.ambientDensity === '-') ? generalFormLabels.form_general_this_field_is_required : null}
            required
            validator={this.props.validator}
            validationRule={this.props.measuredDensityMethod === 'A' ?
              this.props.determineDensityValidationRule(window.StockControl.Constants.vcfADensity) : 'required'}
            static={this.props.measuredDensityMethod === 'A' ? false : true}
            helpText={this.props.measuredDensityMethod === 'A' ? this.props.determineDensityOrTemperatureHelpText(window.StockControl.Constants.vcfADensity) : null}
            validationText={this.props.measuredDensityMethod === 'A' ? this.props.isDensityStockControlValid(false) : this.props.isDensityStockControlValid(true)}
            customValidationText={(this.props.measuredDensityMethod !== 'A' && this.props.isVcfValid === false) ? this.props.stockLabels.no_vcf_found : null}
            step=".01"
            handleInputFocus={this.props.handleInputFocus}
            handleInputKeyPress={this.props.handleInputKeyPress}
          />

          <Input
            name="standardDensity"
            label={detailsLabels.standard_density}
            size="short"
            uom={this.props.densityUOM_Code}
            value={this.props.standardDensity === '-' ? '' : this.props.standardDensity}
            handleInputChange={this.props.handleInputChange}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            validator={this.props.validator}
            fieldsetRowClassName={this.props.measuredDensityMethod !== 'S' && this.props.isVcfValid === false ? 'has-error-true' : null}
            validationRule={this.props.measuredDensityMethod === 'S' ?
              this.props.determineDensityValidationRule(window.StockControl.Constants.vcfSDensity) : 'required'}
            required
            requiredText={(this.props.ambientDensity && this.props.ambientDensity !== '' && this.props.ambientDensity !== '-') ? null : generalFormLabels.form_general_this_field_is_required}
            static={this.props.measuredDensityMethod === 'S' ? false : true}
            helpText={this.props.measuredDensityMethod === 'S' ? this.props.determineDensityOrTemperatureHelpText(window.StockControl.Constants.vcfSDensity) : null}
            //validationText={this.props.measuredDensityMethod === 'S' ? this.props.isDensityStockControlValid(false) : this.props.isDensityStockControlValid(true)}
            validationText={this.props.measuredDensityMethod === 'S' ? this.props.isDensityStockControlValid(false) : this.props.isDensityStockControlValid(true)}
            customValidationText={this.props.measuredDensityMethod !== 'S' && this.props.isVcfValid === false ? this.props.stockLabels.no_vcf_found : null}
            step=".01"
            handleInputFocus={this.props.handleInputFocus}
            handleInputKeyPress={this.props.handleInputKeyPress}
          />

          {vehicleMetersData.length >= 1 ? (
            <MeterRowList {...this.props} 
            handleInputChange={this.props.handleInputChange}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            handleInputFocus={this.props.handleInputFocus}
            handleInputKeyPress={this.props.handleInputKeyPress}
            meterStartReadings={this.props.meterStartReadings}
            meterVolumes={this.props.meterVolumes}
            />
          ) : (
            ''
          )}

          <Input
            name="totalAmbientVolume"
            label={detailsLabels.total_ambient_volume}
            size="short"
            uom={this.props.volumeUOM_Code}
            handleInputChange={this.props.handleInputChange}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            requiredText={generalFormLabels.form_general_this_field_is_required}
            validationText={generalFormLabels.form_general_this_field_is_required}
            value={this.props.totalAmbientVolume === '-' ? '' : this.props.totalAmbientVolume}
            validator={this.props.validator}
            validationRule='required'
            fieldsetClassName={this.props.vehicleMetersData.length >= 1 ? 'offset-2' : ''}
            required
            static={this.props.vehicleMetersData.length >= 1 ? true : false}
            handleInputKeyPress={this.props.handleInputKeyPress}
            handleInputFocus={this.props.handleInputFocus}
            customValidationText={this.props.totalAmbientVolume === '' && this.props.vehicleMetersData.length >= 1 ? generalFormLabels.form_general_this_field_is_required : null }
            fieldsetRowClassName={this.props.totalAmbientVolume === '' && this.props.vehicleMetersData.length >= 1 ? 'has-error-true' : null}
          />
        </Section>

        <Section title={notesLabels.notes_and_documents}>
          <TextArea
            name="internalNotes"
            label={notesLabels.internal_notes}
            helpText={notesLabels.these_notes_are}
            characterLimit={250}
            countLimit={250}
            handleTextAreaChange={this.props.handleTextAreaChange}
            notesLabels={notesLabels}
            value={this.props.internalNotes}
          />


        <DocumentsList items={this.props.documents}
           remove={this.props.handleRemove}
           documentListOptions={this.props.documentListOptions}
           notesLabels={notesLabels}
           handleDocumentTypeChange={this.props.handleDocumentTypeChange}
           handleAddDocumentClick={this.props.handleAddDocumentClick}
           handleDocumentFileInputChange={this.props.handleDocumentFileInputChange}
           documentCounter={documentCounter}
           generalFormLabels={generalFormLabels}
           enableMultipleDocuments={enableMultipleDocuments}
           attachmentLists={this.props.attachmentLists}
           attachmentDocTypes={this.props.attachmentDocTypes}
           attachmentFiles={this.props.attachmentFiles}
           handleResetDocumentList={this.props.handleResetDocumentList}
           handleSelectBlur={this.props.handleSelectBlur}
           selectHasError={this.props.selectHasError}
           selectValidations={this.props.selectValidations}
           handleInputBlur={this.props.handleInputBlur}
           validator={this.props.validator}
           fileValidations={this.props.fileValidations}
           editModeAttachments={this.props.loadedTransaction !== null && this.props.loadedTransaction['Attachments_Metadata']}
           viewDetailsLabels={this.props.viewDetailsLabels}
           showToastHandler={this.props.showToastHandler}
        />
      </Section>

        <ReviewPanelTransferOnsite {...this.props} />

        <Actions isReady={true}
                 ctaLabels={this.props.ctaLabels}
                 handleButtonClick={(event)=>this.props.handleButtonClick(event, this.props.validator)}
                 loadedTransaction={this.props.loadedTransaction}
        />
        {modal.status==="open" ? 
          <Modal 
            modalTitle={modal.modalTitle}
            modalMessage={modal.modalMessage}
            handleModalClose={this.props.handleModalClose}
          /> : null
        }

        {toasts.length ? 
          
          <Toast
            level= "success"
            visible= {true}
            toasts= {toasts}
            enableMultiContainer
          />
          : null}
        
      </React.Fragment>
    );
  }  
};

const mapStateToProps = (state) => {
  const store = state.getLocation_reducer;
  return {
    receivingDeviceOptions : store.receivingDeviceOptions,
    transactionPointOptions : store.transactionPointOptions,
    fuelGradeOptions : store.fuelGradeOptions,
    operatorOptions : store.operatorOptions,
    ambientTemprature : store.ambientTemprature,
    ambientDensity : store.ambientDensity,
    standardDensity : store.standardDensity,
    totalAmbientVolume : store.totalAmbientVolume,
    documentTypeData : store.documentTypeData,
    transferOnsiteLabels : store.transferOnsiteLabels,
    detailsLabels : store.detailsLabels,
    stockLabels : store.stockLabels,
    notesLabels : store.notesLabels,
    generalFormLabels : store.generalFormLabels,
    documentCounter : store.documentCounter,
    enableMultipleDocuments : store.areMultipleDocuments,
    selectedTransactionTypeLabel : store.selectedTransactionTypeLabel,
    selectedSubTransactionTypeLabel : store.selectedSubTransactionTypeLabel,
    dateTimeValidations : store.dateTimeValidations,
    modal : store.modal, 
    toasts : store.toasts,
    startDateField: store.startDateField,
    endDateField: store.endDateField,
    isConfirm: store.isConfirm,
    reviewLabels: store.reviewLabels,
    attachmentLists: store.attachmentLists,
    attachmentDocTypes: store.attachmentDocTypes,
    attachmentFiles: store.attachmentFiles,
    selectValidations: store.selectValidations,
    issuingDeviceOptions: store.issuingDeviceOptions,
    VCF_Method: store.VCF_Method,
    vehicleMetersData: store.vehicleMetersData,
    meterStartReadings: store.meterStartReadings,
    meterVolumes: store.meterVolumes,
    meterEndReadings: store.meterEndReadings,
    meterUoms: store.meterUoms,
    meterValidations: store.meterValidations,
    tempUOM_Code: store.tempUOM_Code,
    densityUOM_Code: store.densityUOM_Code,
    measuredDensityMethod: store.measuredDensityMethod,
    isVcfValid: store.isVcfValid,
    documents: store.documents,
    documentListOptions: store.documentListOptions,
    headerLabels: store.headerLabels,
    deliveryReceiptNumber: store.deliveryReceiptNumber,
    pitOrStandRequired: store.pitOrStandRequired,
    pitNumber: store.pitNumber,
    standNumber: store.standNumber,
    fileValidations: store.fileValidations,
    timezoneOffset: store.timezoneOffset,
    dateStartValidationText: store.dateStartValidationText,
    dateEndValidationText: store.dateEndValidationText,
    startTime: store.startTime,
    endTime: store.endTime,
    volumeUOM_Code: store.volumeUOM_Code,
    userDateFormat: store.userDateFormat,
    selected_SPL_Date_Format: store.selected_SPL_Date_Format,
    ctaLabels: store.ctaLabels,
    internalNotes: store.internalNotes,
    fuelGrade: store.fuelGrade,
    subTransactionType: store.subTransactionType,
    transactionPoint: store.transactionPoint,
    operator: store.operator,
    issuingDevice: store.issuingDevice,
    receivingDevice: store.receivingDevice,
    loadedTransaction: store.loadedTransaction,
    viewDetailsLabels: store.viewDetailsLabels
  }
}

const mapDispatchToProps = (dispatch) => bindActionCreators(
  {
    handleSelectChange : (event, validator) => handleSelectChange(event, validator),
    handleInputChange : (event) => handleInputChange(event),
    handleInputFocus : (event) => handleInputFocus(event),
    handleInputBlur : (event, validator) => handleInputBlur(event, validator),
    handleInputKeyPress: (event) => handleInputKeyPress(event),
    handleSelectBlur : (event) => handleSelectBlur(event),
    handleTextAreaChange : (event) => handleTextAreaChange(event),
    handleCheckboxChange : (event, validator) => handleCheckboxChange(event, validator),
    handleDateChange : (type, dateISOFormat, dateRegular) => handleDateChange(type, dateISOFormat, dateRegular),
    handleModalClose : () => handleModalClose(),
    handleDocumentTypeChange : (event) => handleDocumentTypeChange(event),
    handleAddDocumentClick : (event) => handleAddDocumentClick(event),
    handleRemove : (event) => handleRemove(event),
    handleDocumentFileInputChange : (file, event) => handleDocumentFileInputChange(file, event),
    handleButtonClick : (event, validator) => handleButtonClick(event, validator),
    handleResetDocumentList: () => handleResetDocumentList(),
    showInvalidTimeModal: (event) => showInvalidTimeModal(event),
    validateStartTime: () => validateStartTime(),
    validateEndTime: () => validateEndTime(),
    selectHasError: (options, validation) => selectHasError(options, validation),
    determineDensityOrTemperatureHelpText: (type) => determineDensityOrTemperatureHelpText(type),
    determineDensityValidationRule: (type) => determineDensityValidationRule(type),
    isDensityStockControlValid: (validateVcf) => isDensityStockControlValid(validateVcf),
    getInitialDate: () => getInitialDate(),
    genericStringReplacement: (message, valueArray) => genericStringReplacement(message, valueArray),
    stringReplacement: (messsage, value) => stringReplacement(messsage, value),
    formatDecimalByLocale: (number, precision, israw) => formatDecimalByLocale(number, precision, israw)
  }, dispatch
);

export default connect(mapStateToProps, mapDispatchToProps)(TransactionInfo);
------------------------------------------------------------------------

import {SET_STATE} from '../actions/actionTypes';
import formatDecimalPoints from '../actions/formatDecimalPoints';
import doStockControl from '../actions/doStockControl';
import calculateTotalVolumesForSplitDelivery from '../actions/calculateTotalVolumesForSplitDelivery';
import doSplitStockControl from '../actions/doSplitStockControl';
import buildMetersReview from '../actions/buildMetersReview';
import mapMetersToDatabase from '../actions/mapMetersToDatabase';
import checkDRNValues from '../actions/checkDRNValues';
import validateSplitReceiveingDeviceCriteria from '../actions/validateSplitReceiveingDeviceCriteria';
import formatDecimalByLocale from "./formatDecimalByLocale";

const handleInputBlur = (event, validator) => {
    return (dispatch, getState) => {
        const targetName = event.target.name;
        const { value } = event.target;
        dispatch(formatDecimalPoints(event));
        if (
        targetName.indexOf(window.StockControl.Constants.meterVolumeFieldSuffix) > -1 ||
        targetName === "ambientTemprature" ||
        targetName === "ambientDensity" ||
        targetName === "totalAmbientVolume" ||
        targetName === "standardDensity" ||
        targetName.indexOf(window.StockControl.Constants.receivingAmbVolFieldsPrefix) > -1
        ) {
            if (
                !(event.target.oldValue === value) &&
                getState().getLocation_reducer.autoPopulateTempDens &&
                validator.fieldValid(targetName)
            ) {
                if (getState().getLocation_reducer.transactionType === 'RE') {
                    dispatch(doSplitStockControl(null, null, true));
                    dispatch(calculateTotalVolumesForSplitDelivery());
                } else {
                    dispatch(doStockControl());
                }
                dispatch(buildMetersReview());
                dispatch(mapMetersToDatabase());
            } else if (!getState().getLocation_reducer.autoPopulateTempDens) {
                dispatch(doStockControl());
            }
        }

        if (targetName === "deliveryReceiptNumber") {
            dispatch(checkDRNValues(event));
        }

        if (targetName.indexOf(window.StockControl.Constants.receivingAmbVolFieldsPrefix) > -1) {
            let receivingDevicesAmbVols = getState().getLocation_reducer.receivingDevicesAmbVols;
            let volumePression = getState().getLocation_reducer.volumePrecision;
            let index = event.target.getAttribute('index');
            receivingDevicesAmbVols[index] = dispatch(formatDecimalByLocale(value, volumePression));

            const updateStateAndResolve = async () => {
                let promise = new Promise((resolve, reject)=>{
                    const newreceivingDevicesAmbVols = [...receivingDevicesAmbVols];

                    dispatch({
                        type: SET_STATE,
                        payload: {
                            receivingDevicesAmbVols: newreceivingDevicesAmbVols
                        }
                    });

                    resolve('done');
                });

                let result = await promise;
                if(result === 'done'){
                    dispatch(doSplitStockControl(index, value, false));
                    dispatch(calculateTotalVolumesForSplitDelivery());
                    dispatch(validateSplitReceiveingDeviceCriteria(index));
                }
            }
            updateStateAndResolve();
        }

        //this.validator.showMessageFor(targetName);
        if (validator.fieldValid(targetName)) {
            validator.hideMessageFor.call(this, targetName);
        } else {
            validator.showMessageFor.call(this, targetName);
        }
    }
};

export default handleInputBlur;----------------------------------------------------

import React, { Component } from "react";
import PropTypes from "prop-types";
import Label from "./Label";
import { GetClassList, GetStyles } from "../utility";
import ValidationMessage from "./ValidationMessage";
import Hint from "./Hint";

class Select extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className={`form-group ${!this.props.stacked ? "row":""} ${GetClassList(this.props)} has-error-${this.props.isError}`} style={GetStyles(this.props)}>

        {this.props.label === '' ? null : <Label {...this.props} />}
        <div className={(this.props.options && this.props.options.length === 1 ? 'static' : '') + ' fieldset'}>

          <select
            className={(this.props.options && this.props.options.length === 1 ? 'd-none' : '') + ' form-control'}
            id={this.props.name}
            name={this.props.name}
            type={this.props.inputType}
            value={this.props.options.length === 1 ? this.props.options[0].label : this.props.value}
            onChange={this.props.handleSelectChange}
            required={this.props.required && "required"}
            readOnly={this.props.readOnly && true}
            tabIndex={this.props.readOnly && "-1"}
            disabled={this.props.disabled && true}
            onBlur={this.props.handleSelectBlur}
            index={this.props.index}
            defaultValue={this.props.defaultValue}
            size={this.props.size || null}
            multiple={this.props.multiple || false}
          >

            { this.props.options.map((option, index) =>
                <option
                  key={'option-' + index}
                  value={option.value}
                  label={this.props.placeholder}
                  issuingdeviceid={option.subIssuingDeviceId}
                  receivingdeviceid={option.subReceivingDeviceId}
                  fuelgradeid={option.fuelgradeid}
                  fuelgradeline1={option.fuelgradeline1}
                  fuelgradeaddcode={option.fuelgradeaddcode}
                  itemID={option.itemID}
                  selected={option.selected}
                  vehicletype={option.vehicleType ? option.vehicleType : "false"}
                >
                  {option.label}
                </option>
            )};

          </select>

          {this.props.options.length === 1 ? (
            <span>{this.props.options[0].label}</span>
          ) : (
            ''
          )}

        </div>
        {this.props.validationText && this.props.isError && (
          <div className="col-auto offset-1">
            <ValidationMessage {...this.props} />
          </div>
        )}
        {this.props.helpText && <Hint {...this.props} />}
      </div>
    );
  }
}

Select.propTypes = {
  inputType: PropTypes.oneOf(["text", "number", "password", "email", "hidden"]),
  name: PropTypes.string,
  label: PropTypes.string,
  value: PropTypes.string,
  placeholder: PropTypes.string,
  className: PropTypes.string,
  required: PropTypes.bool,
  hidden: PropTypes.bool,
  handleSelectChange: PropTypes.func,
  options: PropTypes.array,
  validationText: PropTypes.string
};

Select.defaultProps = {
  inputType: "text",
};

export default Select;