January 2020 Archives

Today is a day of changes. Today marks the day that the UK will leave the European Union. It is also a day of changes for me personally as I finished up my final day of contracting. To mark the day that the UK leaves the European Union (Brexit), the Mayor of London has advertised various #LondonIsOpen messages across the city of London. The UK will leave tonight at 11:00pm. On the London Underground, I noticed that the displays were updated to mark "London Is Open, today and always". This advertising reminds me of the Valentine's Day and other promotions that the railway had done in the past when station names were changed to celebrate the day.  

Contracting. I could have stayed in contracting longer, but I was only guaranteed short extensions. I'm not sure if I would have been in this contract in March, so it was time to leave. While I thoroughly enjoyed my time contracting, I will not miss the long hours and short extensions that I have had for the majority. I will not miss having to cancel travel plans because of project deadlines changing or not knowing if I would be in a contract in order to make plans. For many others that I know, contracting offers flexible working and similar treatment to permanent employees instead of a resource; however, I found myself in quite busy and time-intensive/demanding contracts with short extensions and told to cancel my travel plans for my milestone birthday or simply fearful of making travel plans because the one time that I did have plans due at the end of the contract, it made finding the next contract difficult.

My big news is that I am starting a permanent job, and I am hoping that this will be an end to the lack of stability, overworking, and lack of time off that the past five years provided me with. It's also the right time to go because of new legislation being passed in the next couple of months around contractors. I'm not sure what traction that it will have, but that was not the reason that I personally have decided to stop contracting. I am hoping that everything works out well and that I can now start to make plans. 

In addition to the above, the house renovation work has been completed a little over a week ago now; there's still a bit of snagging to do, and I am in the middle of moving/unpacking boxes and deep-cleaning. This is going to take awhile to sort everything out since I am working full time and do not have a break between.

I hope that everything continues to go well. And remember: London Is Open!

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

import Section from "../layout/Section";
import CheckboxInline from "../form/CheckboxInline";
import DateTimePicker from "../form/DateTimePicker";
import Input from "../form/Input";
import Select from "../form/Select";
import TextArea from "../form/TextArea";
import ReviewPanelReceipt from "../form/ReviewPanelReceipt";
import Actions from "../form/Actions";
import InputWithSelect from "../form/InputWithSelect";
import Alert from "../form/Alert";
import Checkbox from "../form/Checkbox";
import ReceivingDeviceList from "../form/ReceivingDeviceList";
import DocumentsList from "../ui/DocumentsList";
import Modal from "../form/Modal";
import 'bootstrap/js/dist/modal';
import 'bootstrap/scss/bootstrap.scss';
import Toast from "../form/Toast";

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 addDevice from '../../store/actions/addDevice';
import removeDevice from '../../store/actions/removeDevice';
import sortArray from "../../store/actions/sortArray";
import convertToGlobalNumberFormat from "../../store/actions/convertToGlobalNumberFormat";
import formatDecimalByLocale from "../../store/actions/formatDecimalByLocale";

class Receipt extends Component {
  constructor(props){
    super(props);
    this.state = {
    };
    this.handleButtonClick.bind(this);
  }

  componentWillMount(){

    console.log('-------receivingDeviceOptions', this.props.receivingDeviceOptions)
    console.log('-------location', this.props.location)

    const {
      documentTypeData,
      UOM,
      densityUOM_ID,
      volumeUOM_ID,
      weightUOM_ID,
      tempUOM_ID,
      receivingDeviceOptions,
      documentListOptions
    } = this.props;
  
    var  volumeUOMOptions = [], tempratureUOMOptions = [], densityUOMOptions = [], weightUOMOptions = [];
  
    // documentTypeData.map((documentList)=>{
    //   return(
    //     documentListOptions.push({
    //       value: documentList.Document_Type_Code,
    //       label: documentList.Document_Type_Name
    //     })
    //   )
    // });

    console.log('-------this.props.loadedTransaction', this.props.loadedTransaction)

    console.log('-------uom', this.props.UOM)

    console.log('-------densityUOM_ID', densityUOM_ID)
    console.log('-------receivingDeviceOptions', receivingDeviceOptions)

    // Building UOM Options for Advised Receipt Section and push location default option to the top

    UOM.map((uom)=> {
        let loadedTransaction = this.props.loadedTransaction;

        switch (uom.UOM_Type) {
          case "Volume":
            // Push the location DUOM Option to the Top and make it default
            if(volumeUOM_ID === uom.UOM_Id && uom.Is_Active){
              volumeUOMOptions.unshift({
                value: uom.UOM_Code,
                label: uom.UOM_Code,
              });
              this.setState({
                selectedVolumeUom: uom.UOM_Code
              });
            } else {
              volumeUOMOptions.push({
                value: uom.UOM_Code,
                label: uom.UOM_Code,
              });
            }
            if (loadedTransaction !== null) {
              this.setState({
                selectedVolumeUom: loadedTransaction['Adv_Quantity_UOM']
              });
            }
            break;

          case "Temperature":
            if(tempUOM_ID === uom.UOM_Id && uom.Is_Active){

              tempratureUOMOptions.unshift({
                value: uom.UOM_Code,
                label: uom.UOM_Code
              });
              this.setState({
                selctedTempUom: uom.UOM_Code
              });
            } else {
              tempratureUOMOptions.push({
                value: uom.UOM_Code,
                label: uom.UOM_Code
              });
            }

            if (loadedTransaction !== null) {
              this.setState({
                selctedTempUom: loadedTransaction['Adv_Temperature_UOM']
              });
            }
            break;

          case "Density":
            if(densityUOM_ID === uom.UOM_Id && uom.Is_Active){
              densityUOMOptions.unshift({
                value: uom.UOM_Code,
                label: uom.UOM_Code
              });

              this.setState({
                selectedDensityUom: uom.UOM_Code
              });
            } else {
              densityUOMOptions.push({
                value: uom.UOM_Code,
                label: uom.UOM_Code
              });
            }
            if (loadedTransaction !== null) {
              this.setState({
                selectedDensityUom: loadedTransaction['Adv_Density_UOM']
              });
            }
            break;

          case "Weight":
            if(weightUOM_ID === uom.UOM_Id && uom.Is_Active){
              weightUOMOptions.unshift({
                value: uom.UOM_Code,
                label: uom.UOM_Code
              });

              this.setState({
                selectedWeightUom: uom.UOM_Code
              });
            } else {
              weightUOMOptions.push({
                value: uom.UOM_Code,
                label: uom.UOM_Code
              });
            }
            if (loadedTransaction !== null) {
              this.setState({
                selectedWeightUom: loadedTransaction['Adv_Weight_UOM']
              });
            }
            break;
          default:
        }
        return true;
      }
    );


    volumeUOMOptions = this.sortUomArray(volumeUOMOptions);
    weightUOMOptions = this.sortUomArray(weightUOMOptions);
    tempratureUOMOptions = this.sortUomArray(tempratureUOMOptions);
    densityUOMOptions = this.sortUomArray(densityUOMOptions);

    this.setState({
      volumeUOMOptions : volumeUOMOptions,
      tempratureUOMOptions : tempratureUOMOptions,
      densityUOMOptions : densityUOMOptions,
      weightUOMOptions : weightUOMOptions,
      // documentListOptions: documentListOptions,
      ambientVolumeDUOM_select: this.props.volumeUOM_Code,
      standardVolumeDUOM_select: this.props.volumeUOM_Code,
      //deviceList : deviceList,
      initialVolumeUOM : this.props['ambientVolumeDUOM_select'] || volumeUOMOptions[0]
    }); 
  }


  sortUomArray = (arrayObj) => {
    arrayObj.sort(function(a, b){
      let aLabel = a.label;
      let bLabel = b.label;

      if (aLabel !== undefined) {
        aLabel = aLabel.toLowerCase();
      }

      if (bLabel !== undefined) {
        bLabel = bLabel.toLowerCase();
      }

      if(aLabel < bLabel) { return -1; }
      if(aLabel > bLabel) { return 1; }
      return 0;
    });
    return arrayObj;
  };

  isBUOMApplicable = () => {
    const {initialVolumeUOM} = this.state;
    const loadedTransaction = this.props.loadedTransaction;

    if(initialVolumeUOM.value === this.props.volumeUOM_Code){
      if(this.props['ambientVolumeDUOM_select'] !== undefined || this.props['standardVolumeDUOM_select'] !== undefined){
        if(this.props['ambientVolumeDUOM_select'] === this.props.volumeUOM_Code || this.props['standardVolumeDUOM_select'] === this.props.volumeUOM_Code){
          return false;
        } else {
          return true;
        }
      } else {
        return false;
      }
    } else {
      if (loadedTransaction !== null) {
        if(this.props['ambientVolumeDUOM_select'] !== undefined || this.props['standardVolumeDUOM_select'] !== undefined){
          if(this.props['ambientVolumeDUOM_select'] === this.props.volumeUOM_Code || this.props['standardVolumeDUOM_select'] === this.props.volumeUOM_Code){
            return false;
          } else {
            return true;
          }
        } else {
          return false;
        }
      } else {
        return true;
      }
    }
  }

  showBUOM(name, val){
    let dUOM = this.props[name];
    const volumeUOM_Code = this.props.volumeUOM_Code;
    const volumeUOM_DUOM = this.props.ambientVolumeDUOM_select;

    if (volumeUOM_DUOM === '' ) {
      dUOM = volumeUOM_Code;
    }
    if(dUOM !== volumeUOM_Code) {
      return true;
    } else {
      return false;
    }
  }

  showTransLossGain(){
    const {measurementMethod, modeOfTransport, ambientVolumeBUOM, standardVolumeBUOM, totalAmbientVolume, documentListOptions} = this.props;

    let ambientVolumeBUOMStr = ambientVolumeBUOM.toString();
    let standardVolumeBUOMStr = standardVolumeBUOM.toString();

    ambientVolumeBUOMStr = this.props.convertToGlobalNumberFormat(ambientVolumeBUOMStr);
    ambientVolumeBUOMStr = parseFloat(ambientVolumeBUOMStr);

    standardVolumeBUOMStr = this.props.convertToGlobalNumberFormat(standardVolumeBUOMStr);
    standardVolumeBUOMStr = parseFloat(standardVolumeBUOMStr);

    if((measurementMethod !== "" && modeOfTransport !== "") && ((ambientVolumeBUOMStr !== "" && !isNaN(ambientVolumeBUOMStr))|| (standardVolumeBUOMStr !== "" && !isNaN(standardVolumeBUOMStr))) && (totalAmbientVolume !== "")){
      return true;
    } else {
      return false;
    }
  }

  // Calculate Ambient Volume for transportation loss and gain
  calcTransAmbVol(){
    const {totalAmbientVolume, ambientVolumeBUOM, volumePrecision} = this.props;
    let ambientVolumeBUOMVal = ambientVolumeBUOM;
    let totalAmbientVolumeVal = totalAmbientVolume;
    ambientVolumeBUOMVal = this.props.convertToGlobalNumberFormat(ambientVolumeBUOMVal);
    totalAmbientVolumeVal = this.props.convertToGlobalNumberFormat(totalAmbientVolume);
    totalAmbientVolumeVal = parseFloat(totalAmbientVolumeVal) - parseFloat(ambientVolumeBUOMVal);
    return this.props.formatDecimalByLocale(totalAmbientVolumeVal, volumePrecision);
  }


  // Calculate Standard Volume for transportation loss and gain
  calcTransStdVol() {
    const {totalStandardVolume, standardVolumeBUOM, volumePrecision} = this.props;
    let standardVolumeBUOMVal = standardVolumeBUOM;
    let totalStandardVolumeVal = totalStandardVolume;
    standardVolumeBUOMVal = this.props.convertToGlobalNumberFormat(standardVolumeBUOMVal);
    totalStandardVolumeVal = this.props.convertToGlobalNumberFormat(totalStandardVolume);
    totalStandardVolumeVal = parseFloat(totalStandardVolumeVal) - parseFloat(standardVolumeBUOMVal);
    return this.props.formatDecimalByLocale(totalStandardVolumeVal, volumePrecision);
  }

  // Calculate Ambient Volume Percentage for transportation loss and gain
  calcAmbVolPercent() {
    const {totalAmbientVolume, volumePrecision} = this.props;
    let totalAmbientVolumeVal = totalAmbientVolume;
    totalAmbientVolumeVal = this.props.convertToGlobalNumberFormat(totalAmbientVolumeVal);
    let calcTransAmbVolVal = this.calcTransAmbVol();
    calcTransAmbVolVal = this.props.convertToGlobalNumberFormat(calcTransAmbVolVal);
    const ambVolPercent = (calcTransAmbVolVal / totalAmbientVolumeVal) * 100;

    return this.props.formatDecimalByLocale(ambVolPercent, volumePrecision); //parseFloat(ambVolPercent).toFixed(volumePrecision);
  }

  // Calculate Standard Volume Percentage for Transportation loss and gain section
  calcStdVolPercent() {
    const {totalStandardVolume, volumePrecision} = this.props;
    let totalStandardVolumeVal = totalStandardVolume;
    totalStandardVolumeVal = this.props.convertToGlobalNumberFormat(totalStandardVolumeVal);
    let calcTransStdVol = this.calcTransStdVol();
    calcTransStdVol = this.props.convertToGlobalNumberFormat(calcTransStdVol);
    const stdVolPercent = (calcTransStdVol / totalStandardVolumeVal) * 100;

    return this.props.formatDecimalByLocale(stdVolPercent,volumePrecision);
  }

  parsedNumber(number) {
    number = this.props.convertToGlobalNumberFormat(number);
    return parseFloat(number);
  }

  isNotValidNumberForVol(number) {
    let retVal = true;
    number = this.props.convertToGlobalNumberFormat(number);

    if (number !== '' && number !== null && number !== undefined) {
      let parsedNum = parseFloat(number);
      retVal = isNaN(parsedNum);
    }
    return retVal;
  }

  determineTolerance(type){
    const {transportationLoss, selectedFuelGradeId, selectedModeOfTransportId, transportationLossGainLabel} = this.props;
    
    if(transportationLoss !== "" && selectedFuelGradeId !== "" && selectedModeOfTransportId !== ""){
      // Determine Tolerance level
      let toleranceLevel = "";

      transportationLoss.map((transLoss)=>{
        if(transLoss.Fuel_Grade_Id === parseInt(selectedFuelGradeId)){
          return transLoss.transportation_mode_loss.map((mode)=>{
            if(mode.Mode_Of_Transport_Id === parseInt(selectedModeOfTransportId)){
              return toleranceLevel = mode.Tolerance_Per_Transaction;
            }
          });
        }
      });

      const  inRange = (x, min, max) => {
        return ((x-min)*(x-max) < 0);
      }

      if(type === "standard") {
        if (inRange(parseFloat(this.calcStdVolPercent()), -toleranceLevel, toleranceLevel)) {
          return null;
        } else {
          return `${transportationLossGainLabel.transportation_loss_gain_msg.replace('{0}',toleranceLevel)}`;
        }
      } else if(type === "ambient") {
        if (inRange(parseFloat(this.calcAmbVolPercent()), -toleranceLevel, toleranceLevel)) {
          return null;
        } else {
          return `${transportationLossGainLabel.transportation_loss_gain_msg.replace('{0}',toleranceLevel)}`;
        }
      } else {
        console.log('Type is unavailable');
      }
    } else {
      return null;
    }
  }

  handleButtonClick = (event) => {
    return this.props.handleButtonClick(event);
  };

  render(){
    const {selectedTransactionTypeLabel,
      selectedSubTransactionTypeLabel,
      receiptLabels,
      receiptVolumeLabels,
      generalFormLabels,
      detailsLabels,
      transportationLossGainLabel,
      transactionPointOptions,
      fuelGradeOptions,
      operatorOptions,
      ambientTemprature,
      ambientDensity,
      standardDensity,
      notesLabels,
      documentCounter,
      enableMultipleDocuments,
      validator,
      dateTimeValidations,
      ambientVolumeDUOM,
      ambientVolumeDUOM_select,
      standardVolumeDUOM,
      standardVolumeDUOM_select,
      ambientTemprature_ARV,
      ambientTemprature_select,
      weightInAir,
      weightInAir_select,
      weightInVacuum,
      weightInVacuum_select,
      ambientDensity_ARV,
      ambientDensity_select,
      standardDensity_ARV,
      standardDensity_select,
      receivingDeviceOptions,
      volumeUOM_Code,
      ambientVolumeBUOM,
      standardVolumeBUOM,
      totalAmbientVolume,
      totalStandardVolume,
      transportationLoss,
      selectedFuelGradeId,
      selectedModeOfTransportId,
      documentListOptions,
      volumePrecision
    } = this.props;

    const {volumeUOMOptions, densityUOMOptions, weightUOMOptions, deviceList, tempratureUOMOptions} = this.state;
    const {selectedVolumeUom, selctedTempUom, selectedDensityUom, selectedWeightUom} = this.state;

    return (
      <React.Fragment>
        <Section title={`${selectedTransactionTypeLabel}`}>
          <Select
            name="transactionPoint"
            label={receiptLabels.transaction_point}
            options={transactionPointOptions}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            generalFormLabels={generalFormLabels}
            helpText={receiptLabels.transaction_point_tooltip}
            value={this.props.transactionPoint}
          />
  
          <Select
            name="fuelGrade"
            label={receiptLabels.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="measurementMethod"
            label={receiptLabels.measurement_method}
            options={this.props.measurementMethodOptions}
            validationText={generalFormLabels.form_general_this_field_is_required}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            handleSelectBlur={this.props.handleSelectBlur}
            isError={this.props.selectHasError(this.props.measurementMethodOptions, this.props.selectValidations["measurementMethod"])}
            generalFormLabels={generalFormLabels}
            required={this.props.measurementMethodOptions.length > 1}
            value={this.props.measurementMethod}
          />
  
          <Select
            name="modeOfTransport"
            label={receiptLabels.mode_of_transport}
            options={this.props.modeOfTransportOptions}
            validationText={generalFormLabels.form_general_this_field_is_required}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            generalFormLabels={generalFormLabels}
            handleSelectBlur={this.props.handleSelectBlur}
            isError={this.props.selectHasError(this.props.modeOfTransportOptions, this.props.selectValidations["modeOfTransport"])}
            required={this.props.modeOfTransportOptions.length > 1}
            value={this.props.modeOfTransport}
          />
  
          <Select
            name="productSupplyCompany"
            label={receiptLabels.product_supplier_company}
            options={this.props.productSupplyCompanyOptions}
            validationText={generalFormLabels.form_general_this_field_is_required}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            handleSelectBlur={this.props.handleSelectBlur}
            isError={this.props.selectHasError(this.props.productSupplyCompanyOptions, this.props.selectValidations["productSupplyCompany"])}
            generalFormLabels={generalFormLabels}
            required={this.props.productSupplyCompanyOptions.length > 1}
            value={this.props.productSupplyCompany}
          />
  
          <Select
            name="locationOfOrigin"
            label={receiptLabels.location_of_origin}
            options={this.props.locationOfOriginOptions}
            validationText={generalFormLabels.form_general_this_field_is_required}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            handleSelectBlur={this.props.handleSelectBlur}
            isError={this.props.selectHasError(this.props.locationOfOriginOptions, this.props.selectValidations["locationOfOrigin"])}
            generalFormLabels={generalFormLabels}
            required={this.props.locationOfOriginOptions.length > 1}
            value={this.props.locationOfOrigin}
          />
  
          <Select
            name="operator"
            label={receiptLabels.operator}
            options={operatorOptions}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            generalFormLabels={generalFormLabels}
            value={this.props.operator}
          />
        </Section>


        { this.props.showAdvisedReceipt === true ?
          <React.Fragment>
            <Section title={this.props.showAdvisedReceipt === true ? receiptVolumeLabels.advised_receipt_volume : ''}>

          <InputWithSelect
            name="ambientVolumeDUOM"
            label={receiptVolumeLabels.ambient_volume_duom}
            options={volumeUOMOptions}
            inputValue={ambientVolumeDUOM === '-' ? '' : ambientVolumeDUOM}
            inputSelect={ambientVolumeDUOM_select || selectedVolumeUom}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            handleInputChange={this.props.handleInputChange}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            handleInputFocus={this.props.handleInputFocus}
            handleInputKeyPress={this.props.handleInputKeyPress}
            helpText={receiptVolumeLabels.ambient_volume_duom_tooltip}
          />

          <InputWithSelect
            name="standardVolumeDUOM"
            label={receiptVolumeLabels.standard_volume_duom}            
            options={volumeUOMOptions}
            inputValue={standardVolumeDUOM === '-' ? '' : standardVolumeDUOM}
            inputSelect={standardVolumeDUOM_select || selectedVolumeUom}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            handleInputChange={this.props.handleInputChange}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            handleInputFocus={this.props.handleInputFocus}
            handleInputKeyPress={this.props.handleInputKeyPress}
            helpText={receiptVolumeLabels.standard_volume_duom_tooltip}
          />

  
          {
            this.isBUOMApplicable() ?
              <React.Fragment>
                { this.showBUOM('ambientVolumeDUOM_select', 'ambientVolumeBUOM') || (this.props.loadedTransaction !== null && this.props.ambientVolumeDUOM_select !== this.props.ambientVolumeBUOM && this.props.ambientVolumeBUOM !== '-') ?
                  <Input name="ambientVolumeBUOM"
                         label={receiptVolumeLabels.ambient_volume_buom}
                         value={this.isNotValidNumberForVol(ambientVolumeDUOM) ? '-' : ambientVolumeBUOM}
                         uom={volumeUOM_Code}
                         helpText={receiptVolumeLabels.ambient_volume_buom_tooltip}
                         static /> : null }

                { this.showBUOM('standardVolumeDUOM_select', 'standardVolumeBUOM') || (this.props.loadedTransaction !== null && this.props.standardVolumeDUOM_select !== this.props.standardVolumeBUOM && this.props.standardVolumeBUOM !== '-') ?
                  <Input name="standardVolumeBUOM"
                         label={receiptVolumeLabels.standard_volume_buom}
                         value={this.isNotValidNumberForVol(standardVolumeDUOM) ? "-" : standardVolumeBUOM}
                         uom={volumeUOM_Code}
                         helpText={receiptVolumeLabels.ambient_volume_buom_tooltip}
                         static /> : null }
       
              </React.Fragment>
              : <React.Fragment></React.Fragment>
          }
          
          <InputWithSelect
            name="ambientTemprature_ARV"
            label={detailsLabels.ambient_temperature}
            options={tempratureUOMOptions}
            inputValue={ambientTemprature_ARV  === '-' ? '' :  ambientTemprature_ARV}
            inputSelect={ambientTemprature_select || selctedTempUom}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            handleInputChange={this.props.handleInputChange}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            handleInputFocus={this.props.handleInputFocus}
            handleInputKeyPress={this.props.handleInputKeyPress}
            value={this.props.selectedVolumeUom}
          />

          <InputWithSelect
            name="ambientDensity_ARV"
            label={detailsLabels.ambient_density}
            options={densityUOMOptions}
            inputValue={ambientDensity_ARV  === '-' ? '' : ambientDensity_ARV}
            inputSelect={ambientDensity_select || selectedDensityUom}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            handleInputChange={this.props.handleInputChange}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            handleInputFocus={this.props.handleInputFocus}
            handleInputKeyPress={this.props.handleInputKeyPress}
          />
  
          <InputWithSelect
            name="standardDensity_ARV"
            label={detailsLabels.standard_density}
            options={densityUOMOptions}
            inputValue={standardDensity_ARV  === '-' ? '' : standardDensity_ARV}
            inputSelect={standardDensity_select || selectedDensityUom}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            handleInputChange={this.props.handleInputChange}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            handleInputFocus={this.props.handleInputFocus}
            handleInputKeyPress={this.props.handleInputKeyPress}
          />

          <InputWithSelect
            name="weightInAir"
            label={receiptVolumeLabels.weight_in_air}
            inputValue={weightInAir  === '-' ? '' : weightInAir}
            inputSelect={weightInAir_select || selectedWeightUom}
            options={weightUOMOptions}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            handleInputChange={this.props.handleInputChange}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            handleInputFocus={this.props.handleInputFocus}
            handleInputKeyPress={this.props.handleInputKeyPress}
          />
  
          <InputWithSelect
            name="weightInVacuum"
            label={receiptVolumeLabels.weight_in_vacuum}
            inputValue={weightInVacuum  === '-' ? '' : weightInVacuum}
            inputSelect={weightInVacuum_select || selectedWeightUom}
            options={weightUOMOptions}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            handleInputChange={this.props.handleInputChange}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            handleInputFocus={this.props.handleInputFocus}
            handleInputKeyPress={this.props.handleInputKeyPress}
          />
        </Section>
        </React.Fragment> : null }
  
        <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={validator}
            validationRule={`required|max:${this.props.VCF_Method.Max_Temp},num|min:${this.props.VCF_Method.Min_Temp},num`}
            helpText={this.props.determineDensityOrTemperatureHelpText(window.StockControl.Constants.vcfTemperature)}
            validationText={this.props.genericStringReplacement(this.props.stockLabels.temperature_range_error, [this.props.VCF_Method.Min_Temp, this.props.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={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={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)}
            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}
          />

          <Checkbox
            name="splitDelivery"
            label={detailsLabels.split_delivery}
            isChecked={this.props.c_splitDelivery}
            value='Y'
            helpText={detailsLabels.split_delivery_tooltip}
            hidden={this.props.loadedTransaction !== null}
            handleCheckboxChange={(event)=>{this.props.handleCheckboxChange(event, this.props.validator)}}
          />


          <ReceivingDeviceList
            deviceList={receivingDeviceOptions}
            detailsLabels={detailsLabels}
            receivingDevicesList={this.props.receivingDevicesList}
            validator={this.props.validator}
            uom={this.props.volumeUOM_Code}
            receivingDeviceOptions={receivingDeviceOptions}
            addDevice={this.props.addDevice}
            removeDevice={(event) => {this.props.removeDevice(event, this.props.validator)}}
            addReceivingDevice={this.props.addReceivingDevice}
            addVolume={this.props.addVolume}
            receivingDevices={this.props.receivingDevices}
            receivingDevicesAmbVols={this.props.receivingDevicesAmbVols}
            receivingDevicesStdVols={this.props.receivingDevicesStdVols}
            handleSelectChange={(event) =>this.props.handleSelectChange(event, validator)}
            handleSelectBlur={this.props.handleSelectBlur}
            handleInputChange={this.props.handleInputChange}
            handleInputBlur={(event)=>{this.props.handleInputBlur(event, this.props.validator)}}
            totalAmbientVolume={this.props.totalAmbientVolume}
            totalStandardVolume={this.props.totalStandardVolume}
            generalFormLabels={this.props.generalFormLabels}
            selectValidations={this.props.selectValidations}
            selectHasError={this.props.selectHasError}
            receivingDevicesValidations={this.props.receivingDevicesValidations}
            handleInputFocus={this.props.handleInputFocus}
            handleInputKeyPress={this.props.handleInputKeyPress}
            helpText={this.props.c_splitDelivery ? detailsLabels.split_delivery_device_tooltip : ''}
            stringReplacement={this.props.stringReplacement}
            deliveryReceiptNumber={this.props.deliveryReceiptNumber}
            headerLabels={this.props.headerLabels}
          />

        </Section>

        {
          this.props.showAdvisedReceipt === true && this.showTransLossGain() ?
            <Section title={transportationLossGainLabel.transportation_loss_gain}>
              {
                ambientVolumeDUOM ? 
                <Input
                  name="trans_ambVol"
                  label={transportationLossGainLabel.ambient_volume}
                  value={this.isNotValidNumberForVol(this.calcTransAmbVol()) ? "-" : this.calcTransAmbVol()}
                  uom={volumeUOM_Code}
                  static={true}
                /> 
                : null
              }
              
              {
                ambientVolumeDUOM && parseFloat(this.props.convertToGlobalNumberFormat(totalAmbientVolume)) > 0 ?
                <Input 
                  name="trans_ambVolPer"
                  label={transportationLossGainLabel.ambient_volume_percentage}
                  value={this.isNotValidNumberForVol(this.calcAmbVolPercent()) ? "-" : this.calcAmbVolPercent()+"%"}
                  uom={volumeUOM_Code}
                  customWarningText={this.determineTolerance("ambient")}
                  fieldsetRowClassName={this.determineTolerance("ambient") ? "has-error-true" : null}
                  static={true}
                />
                : null
              }

              {
                standardVolumeDUOM && parseFloat(this.props.convertToGlobalNumberFormat(totalStandardVolume)) > 0 ?
                <Input
                  name="trans_stdVol"
                  label={transportationLossGainLabel.standard_volume}
                  value={this.isNotValidNumberForVol(this.calcTransStdVol()) ? "-" : this.calcTransStdVol()}
                  uom={volumeUOM_Code}
                  static={true}
                />
                : null
              }

              {
                standardVolumeDUOM && parseFloat(this.props.convertToGlobalNumberFormat(totalStandardVolume)) > 0 ?
                <Input
                name="trans_stdVolPer"
                  label={transportationLossGainLabel.standard_volume_percentage}
                  value={this.isNotValidNumberForVol(this.calcStdVolPercent()) ? "-" : this.calcStdVolPercent()+"%"}
                  uom={volumeUOM_Code}
                  customWarningText={this.determineTolerance("standard")}
                  fieldsetRowClassName={this.determineTolerance("standard") ? "has-error-true" : null}
                  static={true}
                />
                : null
              }
        </Section>
          : null
        }
        
        <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={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>

        <ReviewPanelReceipt 
          {...this.props}
          uom={{volume:volumeUOM_Code}} 
          arv_uom={
            { 
              //volume: this.props.ambientVolumeDUOM_select || this.state.volumeUOMOptions[0].label,
              volume: volumeUOM_Code, 
              temprature: this.props.ambientTemprature_select || this.state.tempratureUOMOptions[0].label,
              density: this.props.ambientDensity_select || this.state.densityUOMOptions[0].label,
              weight: this.props.weightInAir_select || this.state.weightUOMOptions[0].label
            }
          }
          trans_loss_gain={
            {
              ambientVolume: this.showTransLossGain() ? `${this.calcTransAmbVol()}` : "-",
              standardVolume: this.showTransLossGain() && !this.isNotValidNumberForVol(this.calcStdVolPercent()) && this.calcStdVolPercent() !== "Infinity" && this.calcStdVolPercent() !== "-Infinity" ? `${this.calcTransStdVol()}` : "-",
              standardVolumePer: this.showTransLossGain() && !this.isNotValidNumberForVol(this.calcStdVolPercent()) && this.calcStdVolPercent() !== "Infinity" && this.calcStdVolPercent() !== "-Infinity" ? `${this.calcStdVolPercent()}%` : "-",
              ambientVolumePer: this.showTransLossGain() && !this.isNotValidNumberForVol(this.calcAmbVolPercent()) && this.calcAmbVolPercent() !== "Infinity" && this.calcAmbVolPercent() !== "-Infinity" ? `${this.calcAmbVolPercent()}%` : "-"
            }
          }
        />

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

      {this.props.toasts.length ?

        <Toast
          level= "success"
          visible= {true}
          toasts= {this.props.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,
    selectedIssuingDeviceId:store.selectedIssuingDeviceId,
    selectedReceivingDeviceId:store.selectedReceivingDeviceId,
    selectedTransactionTypeLabel:store.selectedTransactionTypeLabel,
    selectedSubTransactionTypeLabel:store.selectedSubTransactionTypeLabel,
    selectedTransactionPointLabel:store.selectedTransactionPointLabel,
    transportationLossGainLabel:store.transportationLossGainLabel,
    totalStandardVolume:store.totalStandardVolume,
    detailsLabels:store.detailsLabels,
    notesLabels:store.notesLabels,
    documentCounter:store.documentCounter,
    reviewLabels:store.reviewLabels,
    generalFormLabels:store.generalFormLabels,
    stockLabels:store.stockLabels,
    receiptVolumeLabels:store.receiptVolumeLabels,
    receiptLabels:store.receiptLabels,
    enableMultipleDocuments:store.areMultipleDocuments,
    ModeOfTransportData:store.ModeOfTransportData,
    startDateField:store.startDateField,
    endDateField:store.endDateField,
    modal:store.modal,
    toasts:store.toasts,
    documentTypeData : store.documentTypeData,
    dateTimeValidations : store.dateTimeValidations,
    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,
    UOM: store.UOM,
    measurementMethodOptions: store.measurementMethodOptions,
    modeOfTransportOptions: store.modeOfTransportOptions,
    productSupplyCompanyOptions: store.productSupplyCompanyOptions,
    locationOfOriginOptions: store.locationOfOriginOptions,
    receivingDevicesList: store.receivingDevicesList,
    volumeUOM_Code: store.volumeUOM_Code,
    receivingDevices: store.receivingDevices,
    receivingDevicesAmbVols: store.receivingDevicesAmbVols,
    receivingDevicesStdVols: store.receivingDevicesStdVols,
    receivingDevicesValidations: store.receivingDevicesValidations,
    delivery_receipt_number: store.delivery_receipt_number,
    headerLabels: store.headerLabels,
    showAdvisedReceipt: store.showAdvisedReceipt,
    ambientVolumeDUOM: store.ambientVolumeDUOM,
    ambientVolumeDUOM_select: store.ambientVolumeDUOM_select,
    standardVolumeDUOM: store.standardVolumeDUOM,
    standardVolumeDUOM_select: store.standardVolumeDUOM_select,
    ambientVolumeBUOM: store.ambientVolumeBUOM,
    standardVolumeBUOM: store.standardVolumeBUOM,
    volumeUOM_ID: store.volumeUOM_ID,
    tempUOM_ID: store.tempUOM_ID,
    densityUOM_ID: store.densityUOM_ID,
    ambientTemprature_select: store.ambientTemprature_select,
    ambientDensity_select: store.ambientDensity_select,
    standardDensity_select: store.standardDensity_select,
    weightInAir_select: store.weightInAir_select,
    weightInVacuum_select: store.weightInVacuum_select,
    c_splitDelivery: store.c_splitDelivery,
    documentListOptions: store.documentListOptions,
    transportationLoss: store.transportationLoss,
    fileValidations: store.fileValidations,
    timezoneOffset: store.timezoneOffset,
    dateStartValidationText: store.dateStartValidationText,
    dateEndValidationText: store.dateEndValidationText,
    startTime: store.startTime,
    endTime: store.endTime,
    transactionType: store.transactionType,
    userDateFormat: store.userDateFormat,
    selected_SPL_Date_Format: store.selected_SPL_Date_Format,
    ambientTemprature_ARV: store.ambientTemprature_ARV,
    ambientDensity_ARV: store.ambientDensity_ARV,
    standardDensity_ARV: store.standardDensity_ARV,
    weightInAir: store.weightInAir,
    weightInVacuum: store.weightInVacuum,
    volumePrecision: store.volumePrecision,
    selectedFuelGradeId: store.selectedFuelGradeId,
    selectedModeOfTransportId: store.selectedModeOfTransportId,
    ctaLabels: store.ctaLabels,
    deliveryReceiptNumber: store.deliveryReceiptNumber,
    internalNotes: store.internalNotes,
    fuelGrade: store.fuelGrade,
    transactionPoint: store.transactionPoint,
    measurementMethod: store.measurementMethod,
    operator: store.operator,
    loadedTransaction: store.loadedTransaction,
    productSupplyCompany: store.productSupplyCompany,
    modeOfTransport: store.modeOfTransport,
    locationOfOrigin: store.locationOfOrigin,
    selctedTempUom: store.selctedTempUom,
    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),
    addDevice: () => addDevice(),
    removeDevice: (event, validator) => removeDevice(event, validator),
    convertToGlobalNumberFormat: (number) => convertToGlobalNumberFormat(number),
    formatDecimalByLocale: (number, precision, isRaw) => formatDecimalByLocale(number, precision, isRaw),
  }, dispatch
);

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

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






import React from "react";
import ReceivingDeviceListItem from "./ReceivingDeviceListItem";

import Input from "./Input";
import MeterRow from "./MeterRow";
import Receipt from "../pages/Receipt";
import {GetClassList} from "../utility";
import Section from "../layout/Section";
import formatDecimalByLocale from "../../store/actions/formatDecimalByLocale";
import Select from "./Select";

const ReceivingDeviceList = props => {
 var errorStatus = "inValid";
 const { validator } = props;


 const isError = (validator, props) => {
 if (validator) {
 const { errorMessages, visibleFields } = validator;
 if (
 ( visibleFields.includes("totalAmbientVolume") &&
 (errorMessages["totalAmbientVolume"] !== null &&
 errorMessages["totalAmbientVolume"] !== ""))
 ||
 ( visibleFields.includes("totalStandardVolume") &&
 (errorMessages["totalStandardVolume"] !== null &&
 errorMessages["totalStandardVolume"] !== ""))
 ) {
 if (errorMessages["totalAmbientVolume"] ||
 errorMessages["totalStandardVolume"]) {

 if (errorMessages["totalAmbientVolume"] !== null && errorMessages["totalAmbientVolume"] !== undefined) {
 if (errorMessages["totalAmbientVolume"].indexOf("required") > -1) {
 errorStatus = "isRequired";
 } else {
 errorStatus = "inValid";
 }
 }

 if (errorMessages["totalStandardVolume"] !== null && errorMessages["totalStandardVolume"] !== undefined) {
 if (errorMessages["totalStandardVolume"].indexOf("required") > -1) {
 errorStatus = "isRequired";
 } else {
 errorStatus = "inValid";
 }
 }
 return true;
 }
 }
 return false;
 } else {
 return false;
 }
 };


 const receivingItems = props.receivingDevicesList.map((item, index) =>
 <ReceivingDeviceListItem
 key={window.StockControl.Constants.receivingFieldsPrefix + index}
 index={index}
 name={item}
 id={window.StockControl.Constants.receivingFieldsPrefix + index }
 label={`${props.detailsLabels.receiving_device} ${index + 1}`}
 validator={props.validator}
 detailsLabels={props.detailsLabels}
 receivingDeviceOptions={props.receivingDeviceOptions}
 uom={props.uom}
 count={props.receivingDevicesCount}
 addDevice={props.addDevice}
 removeDevice={props.removeDevice}
 receivingDevicesLength={props.receivingDevicesList.length}
 receivingDeviceValue={props.receivingDevices[index]}
 receivingDevicesAmbVolValue={props.receivingDevicesAmbVols[index]}
 receivingDevicesStdVolValue={props.receivingDevicesStdVols[index]}
 handleSelectChange={(event)=>{props.handleSelectChange(event, props.validator)}}
 handleSelectBlur={props.handleSelectBlur}
 handleInputChange={props.handleInputChange}
 handleInputBlur={(event)=>{props.handleInputBlur(event, props.validator)}}
 requiredText={props.generalFormLabels.form_general_this_field_is_required}
 validationText={props.generalFormLabels.form_general_this_field_is_required}
 required={true}
 selectValidations={props.selectValidations}
 selectHasError={props.selectHasError}
 customValidation={props.receivingDevicesValidations[index] /*props.receivingDevicesAmbVols[index] === '' || props.receivingDevicesStdVols[index] === '' || props.receivingDevices[index] === '' ? false : true*/}
 handleInputFocus={props.handleInputFocus}
 handleInputKeyPress={props.handleInputKeyPress}
 helpText={props.stringReplacement(props.helpText, `${props.deliveryReceiptNumber ? props.deliveryReceiptNumber : '['+props.headerLabels.delivery_receipt_number+']'}-${index + 1}`)}
 />
 );

 return (
 <div className="receiving-device-list">
 <div className="form-group receiving-device-list__header">
 <div className="device-ambient-volume">{props.detailsLabels.ambient_volume}</div>
 <div className="device-standard-volume">{props.detailsLabels.standard_volume}</div>
 </div>
 {receivingItems}
 <div className={`form-group receiving-device-list__totals has-error-${isError(props.validator, props)}`}>
 <div className="device-label">{props.detailsLabels.total_ambient_and}</div>
 <div className="device-ambient-volume">
 <Input
 //className="form-control"
 size="short"
 label=""
 value={props.totalAmbientVolume === '-' ? '' : props.totalAmbientVolume}
 name="totalAmbientVolume"
 uom={props.uom}
 static
 validationRule={`required|min:0,num`}
 validator={props.validator}
 type="number"
 required
 />

 </div>
 <div className="device-standard-volume">

 <Input
 name="totalStandardVolume"
 type="number"
 size="short"
 label=""
 value={props.totalStandardVolume === '-' ? '' : props.totalStandardVolume}
 uom={props.uom}
 static
 validationRule={`required|min:0,num`}
 validator={props.validator}
 required
 />
 </div>
 {isError(validator, props) ? (
 <div className="fieldset validation-mirror w-100 ml-3 mr-3">
 <div className="validation w-100">
 {errorStatus === "isRequired" ? <p>{props.generalFormLabels.form_general_this_field_is_required}</p> : <p>{props.generalFormLabels.form_general_this_field_is_required}</p>}
 </div>
 </div>
 ) : null}
 </div>
 </div>


 );
};

export default ReceivingDeviceList;


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

import React from "react";
import Label from "./Label";
import { GetClassList, GetStyles } from "../utility";
import ValidationMessage from "./ValidationMessage";
import Hint from "./Hint";
import Select from "./Select";
import Input from "./Input";


const ReceivingDeviceListItem = props => {
  const { validator } = props;

  var errorStatus = "inValid";

  const isError = (validator, props) => {
    if (validator) {
      const { errorMessages, visibleFields } = validator;
      let flag = false;
      let selectflag = false;
      let ambflaf = false;
      let stdflag = false;


      if (props.selectValidations[window.StockControl.Constants.receivingDevicesFieldsPrefix + props.index] !== '') {
        if (props.selectValidations[window.StockControl.Constants.receivingDevicesFieldsPrefix + props.index] === false) {
         // console.log('......');
          errorStatus = "isRequired";
          selectflag = true;
        }
      }

      if ( visibleFields.indexOf(`${window.StockControl.Constants.receivingAmbVolFieldsPrefix}${props.index}`) > -1 &&
        (errorMessages[`${window.StockControl.Constants.receivingAmbVolFieldsPrefix}${props.index}`] !== null &&
        errorMessages[`${window.StockControl.Constants.receivingAmbVolFieldsPrefix}${props.index}`] !== "")) {
        //console.log('....amb vol')
        ambflaf = true;
      }

      if ( visibleFields.indexOf(`${window.StockControl.Constants.receivingStdVolFieldsPrefix}${props.index}`) > -1 &&
        (errorMessages[`${window.StockControl.Constants.receivingStdVolFieldsPrefix}${props.index}`] !== null &&
          errorMessages[`${window.StockControl.Constants.receivingStdVolFieldsPrefix}${props.index}`] !== "")) {
        //console.log('....stdflag vol')
        stdflag = true;
      }

      if (selectflag || ambflaf || stdflag) {
        flag = true;
      }

      return flag;
    } else {
      return false;
    }
  };



  return (
    <React.Fragment>
      <div className={`form-group ${!props.stacked ? "row":""} receiving-device-list__item ${GetClassList(props)} has-error-${isError(props.validator, props) || props.customValidation === false}`} data-id={props.id} style={GetStyles(props)}>
        <Label {...props} />

        <div className="device-type">
          <Select
            name={`${window.StockControl.Constants.receivingDevicesFieldsPrefix}${props.index}`}
            label=""
            options={props.receivingDeviceOptions}
            handleSelectChange={(event)=>{props.handleSelectChange(event, props.validator)}}
            handleSelectBlur={props.handleSelectBlur}
            value={props.receivingDeviceValue}
            index={props.index}
            required={props.receivingDeviceOptions.length > 1}
            isError={props.selectHasError(props.receivingDeviceOptions, props.selectValidations[`${window.StockControl.Constants.receivingDevicesFieldsPrefix}${props.index}`])}
            generalFormLabels={props.generalFormLabels}
          />
        </div>


        <div className="device-ambient-volume short">

          <Input
            //className="form-control"
            name={`${window.StockControl.Constants.receivingAmbVolFieldsPrefix}${props.index}`}
            type="number"
            size="short"
            label=""
            validator={props.validator}
            uom={props.uom}
            value={props.receivingDevicesAmbVolValue  === '-' ? '' : props.receivingDevicesAmbVolValue}
            index={props.index}
            validationRule={`required|min:0,num`}
            required
            handleInputChange={props.handleInputChange}
            handleInputBlur={(event)=>{props.handleInputBlur(event, props.validator)}}
            handleInputFocus={props.handleInputFocus}
            handleInputKeyPress={props.handleInputKeyPress}
            step=".01"
          />
        </div>
        <div className="device-standard-volume short">
          <Input
            name={`${window.StockControl.Constants.receivingStdVolFieldsPrefix}${props.index}`}
            type="number"
            size="short"
            label=""
            value={props.receivingDevicesStdVolValue}
            static
            uom={props.uom}
            required
            handleInputChange={props.handleInputChange}
            handleInputBlur={(event)=>{props.handleInputBlur(event, props.validator)}}
            handleInputKeyPress={props.handleInputKeyPress}
            validationRule={`required|min:0,num`}
            validator={props.validator}
          />

        </div>

        {props.receivingDevicesLength === 2 && props.index + 1 === props.receivingDevicesLength ? (
          <React.Fragment>
            <div className="device-actions">
              <button
                className="btn btn-default device-actions__add"
                onClick={props.addDevice}>
                +
              </button>
            </div>
          </React.Fragment>
        ) : null}

        {(props.receivingDevicesLength > 2 && props.index >= 2 && props.index + 1 < props.receivingDevicesLength) || props.index === 8 ? (
          <React.Fragment>
            <div className="device-actions">
              <button
                className="btn btn-danger device-actions__remove"
                data-key={props.index}
                onClick={props.removeDevice}>
                &times;
              </button>
            </div>
          </React.Fragment>
        ) : null}

        {(props.receivingDevicesLength > 2 && props.receivingDevicesLength < 9) && props.index + 1 === props.receivingDevicesLength ? (
          <React.Fragment>
            <div className="device-actions">
              <button
                className="btn btn-default device-actions__add"
                onClick={props.addDevice}>
                +
              </button>
              <button
                className="btn btn-danger device-actions__remove"
                data-key={props.index}
                onClick={props.removeDevice}>
                &times;
              </button>
            </div>
          </React.Fragment>
        ) : null}

        {props.helpText && <Hint {...props} />}

        {isError(validator, props)  || props.customValidation === false /*|| hasSelectError(props) === false */? (
          <div className="fieldset validation-mirror w-100 ml-3 mr-3">
            <div className="validation w-100">
              {errorStatus === "isRequired" ? <p>{props.requiredText}</p> : <p>{props.validationText}</p>}
            </div>
          </div>
        ) : null}
      </div>
    </React.Fragment>
  );
};


export default ReceivingDeviceListItem;

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);
------------------------------------------------------------------------