- Jenikya's Blog

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;

No TrackBacks

Leave a comment

Search

No TrackBacks

Leave a comment

Search

Archives

Tag Cloud