WindowDialog.js

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import { panelWindow } from '../actions'

import { formatDate, formatNumber } from 'devextreme/localization';
import translate from '../language/index'
import { FREE, BUSY } from '../containers/StatusTypes'

import { Popup as PopupForm, ToolbarItem, Position } from 'devextreme-react/popup';
import { AsyncRule, Form as FormPopup, Item, Label, RequiredRule, SimpleItem, StringLengthRule, Tab, TabbedItem, TabPanelOptions } from 'devextreme-react/form';
import { ScrollView, Button, Box, DropDownBox } from 'devextreme-react';


import DataGrid, { Column, Export, ColumnChooser, ColumnFixing, Selection, Editing, FilterRow, HeaderFilter, SearchPanel, GroupPanel, Sorting, Pager, Paging, Popup, Summary, TotalItem, Lookup, Grouping, Form, Scrolling, GroupItem } from 'devextreme-react/data-grid';
import { Tooltip } from 'devextreme-react/tooltip';

import Magnifier from "react-magnifier";
import { isPlate, imageToDataUri } from '../funcs'
import Carousel from './Carousel';

import * as consts from './../constants'
import { sendRequest } from '../api/api';
import CustomStore from 'devextreme/data/custom_store';

import FileUploader from 'devextreme-react/file-uploader';
import { apiLoad, saveChange } from './../actions'
import notify from 'devextreme/ui/notify';
import { v4 as uuidv4 } from 'uuid'

import jsPDF from 'jspdf';
import 'jspdf-autotable';
import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter';
import { toBase64, isCPF, isCNPJ } from '../funcs'

import ActiveCell from '../components/ActiveCell';
import YesCell from '../components/YesCell';
import axios from 'axios';

const mapStateToProps = store => ({
  modal: store.overlay.modal,
  windows: store.panel.windows,
});

let up = 0;

const mapDispatchToProps = dispatch =>
  bindActionCreators({ panelWindow, apiLoad, saveChange }, dispatch);

class WindowDialog extends React.Component {
  constructor(props) {
    super(props);
    this.timeUpdate = 0;
    this.cancel;
    this._isMounted = false;
    this.dataGridMovimentsRef = React.createRef();
    this.dataGridTarifacaoRef = React.createRef();
    this.dataGridHistoricoRef = React.createRef();
        this.dataGridRef = React.createRef();
        this.gridDocumentsContainer = React.createRef();
        this.fpGuest = React.createRef();
    this.txtQtdHospedes = React.createRef();

    let date = new Date();
    date.setHours(date.getHours() - 3);
    this.state = {
      events: [],
      frmSimulate: {},
      simulateInfo: null,
      dataSource: new CustomStore({
        key: 'pessoa_id',
        load: () => sendRequest('/pessoas/0'),
                insert: (values) => function(){},
        update: (key, values) => function(){}
      }),
      editRowKey: undefined,
            isPhysical: true,
      frmGuest: {},
            contacts: [],
            documents: [],
            addresses: [],
            expanded: true,
            expandedAddress: true,
            expandedContact: true,
            expandedDocument: true,
            contactsDeletedSource: [],
      expand: this.props.expand,
      animation: '',
      animationClose: '',
      error: { field: null, message: null },
      qtd_hospedes: 2,
      camera: null,
      imagens: [],
      isCam: true,
      checkin_em: date.toISOString().substr(0, 19),
      checkout: new Date(),
      awake: new Date(),
      tipo_tarifacao: 0,
      tabIndex: this.props.tabIndex ? this.props.tabIndex : (this.props.status == FREE ? 0 : 7),
      transportes: [],
      hospedes: [],
      servicos: [],
      produtos: [],
      movements: [],
      tarifacoes: [],
      dsTarifacao: [],
      vendas: [],
      frmChekin: { checkin_em: new Date() },
      frmMovimentacao: {},
      fdPaymentMethod: {},
      fdDiscount: {},
      paymentMethodVisible: false,
      discountVisible: false,
      totalServicos: 0,
      totalConsumo: 0,
      totalAdiantamento: 0,
      totalAcrescimos: 0,
      totalDescontos: 0,
      valorReceber: 0,
      valorTroco: 0
    }

    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.changeTab = this.changeTab.bind(this);
    this.update = this.update.bind(this);
    this.onKeyDown = this.onKeyDown.bind(this);
    this.onError = this.onError.bind(this);
    this.addVehicle = this.addVehicle.bind(this);
    this.delVehicle = this.delVehicle.bind(this);
    this.firstTransport = this.firstTransport.bind(this);
    this.addGuest = this.addGuest.bind(this);
    this.delGuest = this.delGuest.bind(this);
    this.paymentMethodClick = this.paymentMethodClick.bind(this);
    this.discountClick = this.discountClick.bind(this);
    this.hideInfo = this.hideInfo.bind(this);
    this.makeDiscount = this.makeDiscount.bind(this);
    this.makePaymentMethod = this.makePaymentMethod.bind(this);

    this.takeSnapShot = this.takeSnapShot.bind(this);
    this.clearSnapShot = this.clearSnapShot.bind(this);
    this.loadCamera = this.loadCamera.bind(this);
    this.catchSnapShot = this.catchSnapShot.bind(this);
    this.thumbsClick = this.thumbsClick.bind(this);
    this.onToolbarPreparing = this.onToolbarPreparing.bind(this);
    this.onToolbarPreparingMoviments = this.onToolbarPreparingMoviments.bind(this);
    this.onToolbarPreparingTransport = this.onToolbarPreparingTransport.bind(this);
    this.onToolbarPreparingProdutosServicos = this.onToolbarPreparingProdutosServicos.bind(this);
    this.onProductsTableSelectionChanged =  this.onProductsTableSelectionChanged.bind(this);

    this.getPaymentMethodById = this.getPaymentMethodById.bind(this);
    this.getDiscountById = this.getDiscountById.bind(this);
    this.calcularTotal = this.calcularTotal.bind(this);
    this.onCalculatePrice = this.onCalculatePrice.bind(this);

    this.onSaving = this.onSaving.bind(this);
        this.onInitNewRow = this.onInitNewRow.bind(this);
        this.onEditingStartGuest = this.onEditingStartGuest.bind(this);
        this.validateForm = this.validateForm.bind(this);
        this.typePersonChange = this.typePersonChange.bind(this);
        this.asyncCpfCnpjValidation = this.asyncCpfCnpjValidation.bind(this);
        this.setImage = this.setImage.bind(this);
    this.renderImgs = this.renderImgs.bind(this);
    this.renderSavedImgs = this.renderSavedImgs.bind(this);
    this.clearImages = this.clearImages.bind(this);
        this.onDropZoneEnter = this.onDropZoneEnter.bind(this);
        this.onDropZoneLeave = this.onDropZoneLeave.bind(this);
        this.onSavingDocuments = this.onSavingDocuments.bind(this);
        this.onEditCanceledDocuments = this.onEditCanceledDocuments.bind(this);
        this.onEditingStartDocuments = this.onEditingStartDocuments.bind(this);
    this.onSavingBilling = this.onSavingBilling.bind(this);

        this.onToolbarPreparingAddress = this.onToolbarPreparingAddress.bind(this);
        this.onToolbarPreparingContact = this.onToolbarPreparingContact.bind(this);
        this.onToolbarPreparingDocument = this.onToolbarPreparingDocument.bind(this);
    this.onToolbarPreparingBill = this.onToolbarPreparingBill.bind(this);

        this.collapseAllClick = this.collapseAllClick.bind(this);
        this.collapseAllClickAddress = this.collapseAllClickAddress.bind(this);
        this.collapseAllClickContact = this.collapseAllClickContact.bind(this);
        this.collapseAllClickDocument = this.collapseAllClickDocument.bind(this);

        this.exportGrid = this.exportGrid.bind(this);
        this.exportGridAddress = this.exportGridAddress.bind(this);
        this.exportGridContact = this.exportGridContact.bind(this);
        this.exportGridDocument = this.exportGridDocument.bind(this);

        this.onRowRemovedContact = this.onRowRemovedContact.bind(this);
    this.getUhData = this.getUhData.bind(this);
    this.getGuests = this.getGuests.bind(this);
    this.checkin = this.checkin.bind(this);

    this.minimizeBtnOp = {
      icon: 'dx-icon dx-icon-minus',
      stylingMode: 'text',
      onClick: this.openModal
    }

    this.billingBtnOp = {
      text: translate('Billing'),
      icon: 'fas fa-dollar-sign',
      onClick: () => this.changeTab(1)
    }

    this.paymentsBtnOp = {
      text: translate('PaymentsAndDiscounts'),
      icon: 'fas fa-coins',
      onClick: () => this.changeTab(2)
    }

    this.checkInBtnOp = {
      text: this.props.status == FREE ? translate('CheckIn') : translate('CheckOut'),
      icon: 'fa fa-sign-in-alt',
      type: 'success',
      onClick: this.checkin.bind(this)
    }

    this.paymentMethodButtonOptions = {
      icon: 'check',
      text: translate('Confirm'),
      onClick: this.makePaymentMethod.bind(this)
    };
    this.discountButtonOptions = {
      icon: 'check',
      text: translate('Confirm'),
      onClick: this.makeDiscount.bind(this)
    };
    this.closeButtonOptions = {
      text: translate('Close'),
      onClick: this.hideInfo
    };
  }

    collapseAllClick(e)
    {
    let newValue = !this.state.expanded;
    e.component.option('hint', newValue ? translate('CollapseAll') : translate('ExpandAll'));
        e.component.option('icon', newValue ? 'arrowup' : 'arrowdown');
    this.setState({
      expanded: newValue
    });
    }

  exportGrid()
    {
        const doc = new jsPDF({ orientation: "landscape" });
        const dataGrid = this.dataGridRef.current.instance;

        var colCount=0;
        for (var i=0; i < dataGrid.columnCount(); i++)
        {
            if(dataGrid.columnOption(i,"groupIndex") > -1)
            {
                colCount++;  // já é suficiente
                break;
            }
        }

        exportDataGridToPdf(
        {
            jsPDFDocument: doc,
            component: dataGrid,
            hideRowsExpanded: !this.state.expanded && colCount > 0
        }).then(() =>
        {
          doc.save(document.title+'.pdf');
        });
    }

    collapseAllClickAddress(e)
    {
    let newValue = !this.state.expandedAddress;
    e.component.option('hint', newValue ? translate('CollapseAll') : translate('ExpandAll'));
        e.component.option('icon', newValue ? 'arrowup' : 'arrowdown');
    this.setState({
      expandedAddress: newValue
    });
    }

    onToolbarPreparingAddress(e) {
    e.toolbarOptions.items.unshift({
      location: 'after',
      widget: 'dxButton',
      options: {
                icon:'exportpdf',
        hint: translate('INF_65'),
        onClick: this.exportGridAddress
      }
    },
        {
      location: 'after',
      widget: 'dxButton',
      options: {
                icon: 'arrowup',
        hint: translate('CollapseAll'),
        onClick: this.collapseAllClickAddress
      }
    });
    }

    exportGridAddress()
    {
        const doc = new jsPDF({ orientation: "landscape" });
        const dataGrid = this.dataGridRef.current.instance;

        var colCount=0;
        for (var i=0; i < dataGrid.columnCount(); i++)
        {
            if(dataGrid.columnOption(i,"groupIndex") > -1)
            {
                colCount++;  // já é suficiente
                break;
            }
        }

        exportDataGridToPdf(
        {
            jsPDFDocument: doc,
            component: dataGrid,
            hideRowsExpanded: !this.state.expanded && colCount > 0
        }).then(() =>
        {
          doc.save(document.title+'_'+translate('Address')+'.pdf');
        });
    }

    collapseAllClickContact(e)
    {
    let newValue = !this.state.expandedContact;
    e.component.option('hint', newValue ? translate('CollapseAll') : translate('ExpandAll'));
        e.component.option('icon', newValue ? 'arrowup' : 'arrowdown');
    this.setState({
      expandedContact: newValue
    });
    }

    onToolbarPreparingContact(e) {
    e.toolbarOptions.items.unshift({
      location: 'after',
      widget: 'dxButton',
      options: {
                icon:'exportpdf',
        hint: translate('INF_65'),
        onClick: this.exportGridContact
      }
    },
        {
      location: 'after',
      widget: 'dxButton',
      options: {
                icon: 'arrowup',
        hint: translate('CollapseAll'),
        onClick: this.collapseAllClickContact
      }
    });
    }

    exportGridContact()
    {
        const doc = new jsPDF({ orientation: "landscape" });
        const dataGrid = this.dataGridRef.current.instance;

        var colCount=0;
        for (var i=0; i < dataGrid.columnCount(); i++)
        {
            if(dataGrid.columnOption(i,"groupIndex") > -1)
            {
                colCount++;  // já é suficiente
                break;
            }
        }

        exportDataGridToPdf(
        {
            jsPDFDocument: doc,
            component: dataGrid,
            hideRowsExpanded: !this.state.expanded && colCount > 0
        }).then(() =>
        {
          doc.save(document.title+'_'+translate('Contact')+'.pdf');
        });
    }

    collapseAllClickDocument(e)
    {
    let newValue = !this.state.expandedDocument;
    e.component.option('hint', newValue ? translate('CollapseAll') : translate('ExpandAll'));
        e.component.option('icon', newValue ? 'arrowup' : 'arrowdown');
    this.setState({
      expandedDocument: newValue
    });
    }

    onToolbarPreparingDocument(e) {
    e.toolbarOptions.items.unshift({
      location: 'after',
      widget: 'dxButton',
      options: {
                icon:'exportpdf',
        hint: translate('INF_65'),
        onClick: this.exportGridDocument
      }
    },
        {
      location: 'after',
      widget: 'dxButton',
      options: {
                icon: 'arrowup',
        hint: translate('CollapseAll'),
        onClick: this.collapseAllClickDocument
      }
    });
    }

    exportGridDocument()
    {
        const doc = new jsPDF({ orientation: "landscape" });
        const dataGrid = this.dataGridRef.current.instance;

        var colCount=0;
        for (var i=0; i < dataGrid.columnCount(); i++)
        {
            if(dataGrid.columnOption(i,"groupIndex") > -1)
            {
                colCount++;  // já é suficiente
                break;
            }
        }

        exportDataGridToPdf(
        {
            jsPDFDocument: doc,
            component: dataGrid,
            hideRowsExpanded: !this.state.expanded && colCount > 0
        }).then(() =>
        {
          doc.save(document.title+'_'+translate('Document')+'.pdf');
        });
    }

    onEditingStartDocuments(e)
    {
        if(this._isMounted)
        {
            this.setState({
                editRowKeyDocuments: e.key,
                imagensSource: e.data.imagens ? e.data.imagens : [],
            });
        }
    }

    onEditCanceledDocuments(e){
        if(this._isMounted)
        {
            this.setState({
                editRowKeyDocuments: null
            });
        }
    }

    onRowRemovedContact(e)
    {
        if(Number.isInteger(e.key))
        {
            let contactsDeletedSource = this.state.contactsDeletedSource;
            contactsDeletedSource.push(e.key);
            this.setState({contactsDeletedSource: contactsDeletedSource});
        }
    }

  onDropZoneEnter(e) {
    if(e.dropZoneElement.id === 'dropzone-external') {
            if(this._isMounted)
            {
                this.setState({ isDropZoneActive: true });
            }
    }
  }

  onDropZoneLeave(e) {
    if(e.dropZoneElement.id === 'dropzone-external') {
            if(this._isMounted)
            {
                this.setState({ isDropZoneActive: false });
            }
    }
    }

    setImage(imagem)
    {
        let _this = this;
        let images = [];

        for(var i =0; i < imagem.value.length; i++)
        {
            if(imagem.value[i].size > 1048576)
            {
                notify({ message: translate('ERROR_18')+' 1 MB.', position: 'top center'}, 'warning', 3000);
                return;
            }

            toBase64(imagem.value[i]).then(function(dataURI)
            {
                if(_this._isMounted)
                {
                    images.push(dataURI);
                    _this.setState({imagens: images, textVisible: false});
                }
            });
        }
    }

    clearImages()
    {
        if(this._isMounted)
        {
            this.setState({imagens: [], textVisible: true});
        }
    }

    renderImgs()
    {
        if (this.state.imagens && this.state.imagens.length > 0)
        {
            var data = this.state.imagens.map((img, index) =>
            {
                return (
                    <div className="dropzone-image" key={index}>
                        <img src={img} alt="" />
                    </div>
                );
            });

            return data;
        }
        else return [];
    }

    removeImgSaved(img, index)
    {
        let images = this.state.imagensSource;
        let imagensDeletedSource = this.state.imagensDeletedSource;
        imagensDeletedSource.push(images.splice(index, 1));

        if(this._isMounted)
        {
            this.setState({popupConfirm: true, keyDel: img, typeDel: 0, imagensSource: images, imagensDeletedSource: imagensDeletedSource});
        }
    }

    renderSavedImgs()
    {
        if (this.state.imagensSource && this.state.imagensSource.length > 0)
        {
            var data = this.state.imagensSource.map((img, index) =>
            {
                return (
                    <div className="saved-image" key={index}>
                        <img src={img} alt="" />
                        <i className="fa fa-close" onClick={() => this.removeImgSaved(img, index)}></i>
                    </div>
                );
            });

            return data;
        }
        else return [];
    }

    onSavingDocuments(e)
    {
        let documents = this.state.documents;
        let doc = e.changes.length > 0 ? e.changes[0].data : {};
        let idxEdit = -1;
        let _this = this;

        if(this.state.editRowKeyDocuments)
        {
            documents.forEach(function (val, index) {
                if(val.pessoa_documento_id == _this.state.editRowKeyDocuments)
                {
                    idxEdit = index;
                    return;
                }
            });

            documents[idxEdit].estado = doc.hasOwnProperty('estado') ? doc.estado : documents[idxEdit].estado;
            documents[idxEdit].expedidor = doc.hasOwnProperty('expedidor') ? doc.expedidor : documents[idxEdit].expedidor;
            documents[idxEdit].imagens = this.state.imagens.length > 0 ? this.state.imagens : [];
            documents[idxEdit].numero = doc.hasOwnProperty('numero') ? doc.numero : documents[idxEdit].numero;
            documents[idxEdit].tipo = doc.hasOwnProperty('tipo') ? doc.tipo : documents[idxEdit].tipo;
            documents[idxEdit].ativo = doc.hasOwnProperty('ativo') ? doc.ativo : documents[idxEdit].ativo;
            documents[idxEdit].principal = doc.hasOwnProperty('principal') ? doc.principal : documents[idxEdit].principal;
            documents[idxEdit].observacao = doc.hasOwnProperty('observacao') ? doc.observacao : documents[idxEdit].observacao;
            documents[idxEdit].nome = doc.hasOwnProperty('nome') ? doc.nome : documents[idxEdit].nome;
            documents[idxEdit].expedido_em = doc.hasOwnProperty('expedido_em') ? doc.expedido_em : documents[idxEdit].expedido_em;

            // removidas
            documents[idxEdit].imagens_removidas = this.state.imagensDeletedSource.length > 0 ? this.state.imagensDeletedSource.concat(documents[idxEdit].imagens_removidas) : [];

        }
        else
        {
            doc = Object.assign({pessoa_documento_id: uuidv4(), imagens: this.state.imagens}, doc);
            documents.push(doc);
        }

        if(this._isMounted)
        {
            this.setState({imagens: [], imagensSource: [], imagensDeletedSource: [], contactsDeletedSource: [], dependentsDeletedSource: [], editRowKeyDocuments: undefined, documents: documents});
            e.cancel = true;
            this.gridDocumentsContainer.current.instance.refresh();
            this.gridDocumentsContainer.current.instance.cancelEditData();
        }
    }

    onSaving(e)
    {
        if(!this.fpGuest.current.instance.validate().isValid)
        {
            e.cancel = true;
            return;
        }

        // valida cpf e cnpj
        if(this.state.frmGuest.tipo == 0 )
        {
            if(!isCPF(this.state.frmGuest.cpf_cnpj))
            {
                notify({ message: translate('INF_60'), position: 'top center'}, 'warning', 3000);
                e.cancel = true;
                return;
            }
        }
        else if(this.state.frmGuest.tipo == 1 )
        {
            if(!isCNPJ(this.state.frmGuest.cpf_cnpj))
            {
                notify({ message: translate('INF_61'), position: 'top center'}, 'warning', 3000);
                e.cancel = true;
                return;
            }
        }

        if(this.state.editRowKey)
        {
            e.cancel = true;

            e.promise = saveChange(this.props.dispatch, '/pessoas/2', {
                type: 'update',
                data: Object.assign({contacts: this.state.contacts, addresses: this.state.addresses, documents: this.state.documents, contatos_removidos: this.state.contactsDeletedSource}, this.state.frmGuest)
            });

            let _this = this;
            e.promise.then(function(e)
            {
                if(_this._isMounted && e)
                {
                    _this.setState({editRowKey: undefined, contactsDeletedSource: [], contacts: [], addresses: [], frmGuest: {}});
                    _this.dataGridRef.current.instance.refresh();
                    _this.dataGridRef.current.instance.cancelEditData();
                }
            });
            return;
        }
        else
        {
            e.promise = sendRequest(`/pessoas/2`, 'POST', {
                values: Object.assign({contacts: this.state.contacts, addresses: this.state.addresses, documents: this.state.documents}, this.state.frmGuest)
            });

            let _this = this;
            e.cancel = true;
            e.promise.then(function(e)
            {
                if(_this._isMounted && e)
                {
                    _this.setState({editRowKey: undefined, contactsDeletedSource: [], contacts: [], addresses: [], documents: [], frmGuest: {}});
                    _this.dataGridRef.current.instance.refresh();
                    _this.dataGridRef.current.instance.cancelEditData();
                }
            });
            return;
        }
    };

  onSavingBilling()
  {
    let tabelaPreco = {};
    let lista = this.state.tarifacoes;

    lista.forEach((item, index) => {
      if(item.tabela_preco_id == this.state.frmSimulate.tabela_preco) {
        tabelaPreco = item;
        lista = null;
      }
    });

    let checkout = new Date(this.state.checkout || this.state.frmChekin.checkin_em);
    let duracao = new Date(tabelaPreco.duracao_tarifacao);
    checkout.setHours(checkout.getHours() + duracao.getHours())

    let tarifacao = {
      tarifacao_id: this.state.dsTarifacao.length + 1,
      descricao: tabelaPreco.descricao,
      duracao: tabelaPreco.duracao_tarifacao,
      valor_cobrado: tabelaPreco.valor_cobrado,
      horario_lancamento: new Date()
    };

    let tarifacoes = this.state.dsTarifacao;
    tarifacoes.push(tarifacao);

    this.setState({
      dsTarifacao: tarifacoes,
      checkout: checkout,
      tipo_tarifacao: tabelaPreco.tipo_tarifacao
    })
  }

    onInitNewRow(e)
    {
        if(this._isMounted && e.rowType === "data")
        {
            this.setState({contacts: [], addresses: [], documents: [], frmGuest: {}});
        }
    }

    typePersonChange(e)
    {
        this.setState({isPhysical: e.value == 0 ? true : false });
    }

  paymentMethodClick() {
    this.setState({ paymentMethodVisible: !this.state.paymentMethodVisible, discountVisible: false });
  }

  discountClick() {
    this.setState({ discountVisible: !this.state.discountVisible, paymentMethodVisible: false });
  }

  makePaymentMethod() {
    let movements = this.state.movements;
    let movement = this.getPaymentMethodById(this.state.fdPaymentMethod.forma_pagamento_id);
    let total = 0;

    let payment = {
      cod_movimento: movements.length + 1,
      movimentacao: movement.descricao,
      valor: this.state.fdPaymentMethod.valor,
      tipo: 'pagamento',
      data: new Date()
    }

    movements.push(payment);

    movements.forEach((element) => {
      if(element.tipo == 'pagamento')
        total += element.valor;
    })

    if (this._isMounted) {
      this.setState({
        payments: movements,
        totalAdiantamento: total,
        paymentMethodVisible: false
      });
    }

    this.calcularTotal();
  }

  makeDiscount() {
    let movements = this.state.movements;
    let movement = this.getDiscountById(this.state.fdDiscount.id);
    let total = 0;

    let payment = {
      cod_movimento: movements.length + 1,
      movimentacao: movement.descricao,
      valor: this.state.fdDiscount.valor,
      tipo: 'desconto',
      data: new Date()
    }

    movements.push(payment);

    movements.forEach((element) => {
      if(element.tipo == 'desconto')
        total += element.valor;
    })

    if (this._isMounted) {
      this.setState({
        payments: movements,
        totalDescontos: total,
        discountVisible: false
      });
    }

    this.calcularTotal();
  }

  getPaymentMethodById(id) {
    let payment = {};

    this.state.srcFormasPagamento.forEach(function (data, index) {
      if(data.forma_pagamento_id == id) {
        payment = data;
      }
    })

    return payment;
  }

  getDiscountById(id) {
    let discount = {};

    this.state.srcDescontoParceiros.forEach(function (data, index) {
      if (data.id == id) {
        discount = data;
      }
    })

    return discount;
  }

  calcularTotal() {
    let vlrReceber = 0;
    let vlrTroco = 0;
    let vlrDescontos = this.state.totalDescontos;
    let vlrAcrescimo = this.state.totalAcrescimos;
    let vlrConsumo = this.state.totalConsumo;
    let vlrServico = this.state.totalServicos;
    let vlrAdiantamento = this.state.totalAdiantamento;

    vlrReceber = (this.state.simulateInfo[0].valor_cobrado + this.state.simulateInfo[0].valor_hora_adicional + vlrServico + vlrConsumo + vlrAcrescimo) - (vlrDescontos + vlrAdiantamento);
    vlrTroco = vlrAdiantamento > vlrReceber ? vlrAdiantamento - vlrReceber : 0;

    this.setState({
      valorReceber: vlrReceber,
      valorTroco: vlrTroco,
      totalAcrescimos: this.state.simulateInfo[0].valor_hora_adicional
    })
  }

  hideInfo() {
    this.setState({
      paymentMethodVisible: false,
      discountVisible: false,
      fdPaymentMethod: {},
      fdDiscount: {}
    });
  }

  loadCamera() {
    if (this._isMounted) {
      //Captura elemento de vídeo
      var video = document.querySelector("#web_camera");
      if (!video) {
        return;
      }
      //As opções abaixo são necessárias para o funcionamento correto no iOS
      video.setAttribute('autoplay', '');
      video.setAttribute('muted', '');
      video.setAttribute('playsinline', '');

      let _this = this;

      //Verifica se o navegador pode capturar mídia
      if (navigator.mediaDevices) {
        navigator.mediaDevices.getUserMedia({ audio: false, video: { facingMode: 'user' } })
          .then(function (stream) {
            //Definir o elemento vídeo a carregar o capturado pela webcam
            video.srcObject = stream;
          })
          .catch(function (error) {
            _this.setState({ camera: '/img/no-cam.svg', isCam: false });
          });
      }
    }
  }

  takeSnapShot() {
    if (this._isMounted) {
      let imagens = this.state.imagens;

      if (imagens.length >= 10) {
        let messages = this.props.messages;
        messages.push({ type: 'info', title: translate('CheckIn'), description: translate('INF_42'), uuid: uuidv4() });
        this.props.messageBox(messages);
        return;
      }
      //Captura elemento de vídeo
      var video = document.querySelector("#web_camera");

      var dataURI = imageToDataUri(video, video.videoWidth, video.videoHeight);

      imagens.push(dataURI);
      this.setState({ camera: null, imagens: imagens });

      let _this = this;
      setTimeout(() => {
        _this.loadCamera();
      }, 100);
    }
  }

  clearSnapShot() {
    if (this._isMounted) {
      let imagens = this.state.imagens;

      for (var i = 0; i < imagens.length; i++) {
        if (imagens[i] == this.state.camera) {
          imagens.splice(i, 1);
        }
      }

      this.setState({ camera: null, imagens: imagens });

      let _this = this;
      setTimeout(() => {
        _this.loadCamera();
      }, 100);
    }
  }

  catchSnapShot() {
    if (this._isMounted) {
      this.setState({ camera: null });

      let _this = this;
      setTimeout(() => {
        _this.loadCamera();
      }, 100);
    }
  }

  thumbsClick(image) {
    if (this._isMounted) {
      this.setState({ camera: image });
    }
  }

  onError(error) {
    if (this._isMounted) {
      this.setState({ error: error });
    }
  }

  update() {
    this.forceUpdate();
  }

  delVehicle(_index) {
    let transportes = this.state.transportes;

    transportes.splice(_index, 1);

    if (this._isMounted) {
      this.setState({ transportes: transportes, tipo_transporte: 2, placa_transporte: '', modelo_transporte: '', cor_transporte: '' });
      up++;
    }
  }

  addVehicle(vehicle) {
    let transportes = this.state.transportes;

    transportes.push(vehicle);

    if (this._isMounted) {
      this.setState({ transportes: transportes, tipo_transporte: 2, placa_transporte: '', modelo_transporte: '', cor_transporte: '' });
      up++;
    }
  }

  firstTransport(type, value) {
    let transportes = this.state.transportes;

    switch (type) {
      case 1: transportes[0].tipo = value; break;
      case 2: transportes[0].placa = value; break;
      case 3: transportes[0].modelo = value; break;
      case 4: transportes[0].cor = value; break;
    }

    if (this._isMounted) {
      this.setState({ transportes: transportes, tipo_transporte: 2, placa_transporte: '', modelo_transporte: '', cor_transporte: '' });
      up++;
    }
  }

  delGuest(_index) {
    let hospedes = this.state.hospedes;

    hospedes.splice(_index, 1);

    if (this._isMounted) {
      this.setState({ hospedes: hospedes, tipo_hospede: hospedes.length > 0 ? hospedes[0].tipo_hospede : 0, nome_hospede: hospedes.length > 0 ? hospedes[0].nome_hospede : '', cpf_cnpj_hospede: hospedes.length > 0 ? hospedes[0].cpf_cnpj_hospede : '' });
      up++;
    }
  }

  addGuest(hospede) {
    let hospedes = this.state.hospedes;

    hospedes.push(hospede);

    if (this._isMounted) {
      this.setState({ hospedes: hospedes, tipo_hospede: hospedes.length > 0 ? hospedes[0].tipo_hospede : 0, nome_hospede: hospedes.length > 0 ? hospedes[0].nome_hospede : '', cpf_cnpj_hospede: hospedes.length > 0 ? hospedes[0].cpf_cnpj_hospede : '' });
      up++;
    }
  }

  async componentDidMount() {
    this._isMounted = true;
    window.addEventListener('resize', this.update);
    document.addEventListener("keydown", this.onKeyDown, false);

    let _this = this;
    setTimeout(() => {
      _this.loadCamera();
    }, 300);

    if(_this.props.status == BUSY) {
      //await _this.getGuests();
      await _this.getUhData();
      await _this.onCalculatePrice();
    }

    const promise0 = sendRequest('/formas-pagamento-ativas');
    promise0.then(function (res) {
      if(_this._isMounted)
      {
        _this.setState({ srcFormasPagamento: res });
      }
    });

    const promise1 = sendRequest('/parceiros/regras');
    promise1.then(function (res) {
      if(_this._isMounted)
      {
        _this.setState({ srcDescontoParceiros: res });
      }
    });

    const promise2 = sendRequest('/tabelas-precos-ativas');
    promise2.then(function (res) {
      let lista = [];

      if(_this._isMounted)
      {
        res.forEach((data, index) => {
          let diaSemana = new Date();

          if(diaSemana.getDay() == data.dia_semana && data.categoria_id == _this.props.windows[0].categoria_id) {
            lista.push(data);
          }
        })

        _this.setState({ tarifacoes: lista });
      }
    });

    const promise3 = sendRequest('/produtos-servicos');
    promise3.then(function (res) {
      if(_this._isMounted)
      {
        _this.setState({ srcProdutosservicos: res });
      }
    });

    const promise4 = sendRequest('/grupo-produtos-ativos');
        promise4.then(function(res){
            if(_this._isMounted)
            {
                _this.setState({groupsSource: res});
            }
        });

        const promise5 = sendRequest('/unidades-medida');
        promise5.then(function(res){
            if(_this._isMounted)
            {
                _this.setState({measuresSource: res});
            }
        });
  }

  async getUhData() {
    let _this = this;

    const res = await sendRequest('/vendas/getByUhId/' + _this.props.windows[0].uh_id);

    let form = _this.state.frmChekin;
    form['checkin_em'] = new Date(res[0].checkin_em);
    form['qtd_hospedes'] = res[0].hospedes;

    _this.setState({
      vendas: res,
      checkin_em: new Date(res[0].checkin_em),
      frmChekin: form
    });
  }

  getGuests() {
    const promise = sendRequest('/pessoas/getGuests/' + this.props.windows[0].uh_id);

    promise.then((res) => {
      this.setState({
        dataSource: res
      });
    });
  }

  onKeyDown(e) {
    if(e.altKey) {
      switch(e.keyCode) {
        case 49: this.changeTab(0);
                 break;
        case 50: this.changeTab(1);
                 break;
        case 51: this.changeTab(2);
                 break;
        case 52: this.changeTab(3);
                 break;
        case 53: this.changeTab(4);
                 break;
        case 54: this.changeTab(5);
                 break;
        case 55: this.changeTab(6);
                 break;
      }
    } else if(e.keyCode == 27) {
      this.closeModal();
    }
  }

  componentWillUnmount() {
    this._isMounted = false;
    clearInterval(this.timeUpdate);
    if (this.cancel) this.cancel();
  }

    validateForm(e){
        e.component.validate();
    }

    onEditingStartGuest(e) {
    let _this = this;
        const promise1 = sendRequest('/pessoas/' + e.key + '/0');

        promise1.then(function(res){
      if(_this._isMounted)
            {
                _this.setState({
          editRowKey: e.key,
          fpGuest: res.pessoa,
                    contacts: res.contacts,
                    addresses: res.addresses,
                    documents: res.documents
                });
            }
        });
    }

    asyncCpfCnpjValidation(params)
    {
        const editRowKey = !!this.state.editRowKey;
        const promise4 = sendRequest('/pessoas/usuario/cpfcnpj/check/2', 'POST', {cpf_cnpj: params.value});
        return promise4.then(function(res)
        {
            return res || editRowKey
        });
  }

  renderState(data) {
    return <span>{data.descricao}</span>;
  }

  openModal() {
    if (!this.state.expand && this.props.modal) {
      return;
    }

    if (this._isMounted) {
      this.setState({ expand: !this.state.expand, animationClose: (!this.state.expand) ? '' : ' zoomOutDown2 ' });

      let wd = this.props.windows;
      for (var i = 0; i < wd.length; i++) {
        if (this.props.uh_codigo == wd[i].uh_codigo) {
          wd[i].expand = !wd[i].expand;
          wd[i].tabIndex = this.state.tabIndex;
        }
      }

      this.props.panelWindow(wd);

      let _this = this;
      setTimeout(function () {
        _this.setState({ animationClose: '', frmMovimentacao: { qtd_hospedes: frmChekin.qtd_hospedes } });
      }, 1000);
    }
  }

  closeModal() {
    if (this._isMounted) {
      let wd = this.props.windows, wnd = [];
      for (var i = 0; i < wd.length; i++) {
        if (this.props.uh_codigo != wd[i].uh_codigo) {
          wnd.push(wd[i]);
        }
      }

      this.props.panelWindow(wnd);
    }
  }

  async changeTab(_idx) {
    if (this._isMounted) {
      var wd = this.props.windows;
      for (var i = 0; i < wd.length; i++) {
        if (this.props.uh_codigo == wd[i].uh_codigo) {
          wd[i].title = _idx;
        }
      }
      this.props.panelWindow(wd);
      var _this = this;

      if(_idx == 2) {
        await _this.onCalculatePrice();
      }

      setTimeout(function () {
        if (_this._isMounted) {
          _this.setState({ tabIndex: _idx });
        }
      }, 100);
    }
  }

  onToolbarPreparingBill(e) {
    e.toolbarOptions.items.unshift(
      {
        location: 'before',
        widget: 'dxLookup',
        options: {
          width: 200,
          dataSource: this.state.tarifacoes,
          valueExpr: 'tabela_preco_id',
          displayExpr: 'descricao',
          value: this.state.frmSimulate.tabela_preco,
          searchEnabled: false,
          showClearButton: false,
          showCancelButton: false,
          closeOnOutsideClick: true,
          onValueChanged: (args) => {
            let formValues = this.state.frmSimulate;

            formValues['tabela_preco'] = args.value;

            this.setState({
              frmSimulate: formValues
            })
          }
        }
      },
      {
        location: 'before',
        widget: 'dxButton',
        options: {
          type: 'success',
          text: translate('Confirm'),
          hint: translate('Confirm'),
          onClick: this.onSavingBilling
        }
      }
    )
  }

  onToolbarPreparingMoviments(e) {
    e.toolbarOptions.items.unshift(
      {
        location: 'after',
        widget: 'dxButton',
        options: {
          type: 'success',
          text: (this.state.discountVisible || this.state.paymentMethodVisible) ? translate('Confirm') : translate('PostPaymentMethod'),
          onClick: (this.state.discountVisible || this.state.paymentMethodVisible) ? (this.state.paymentMethodVisible ? this.makePaymentMethod : this.makeDiscount) : this.paymentMethodClick
        }
      },
      {
        location: 'after',
        widget: 'dxButton',
        options: {
          type: 'danger',
          text: (this.state.discountVisible || this.state.paymentMethodVisible) ? translate('Cancel') : translate('PostDiscount'),
          onClick: (this.state.discountVisible || this.state.paymentMethodVisible) ? this.hideInfo : this.discountClick
        }
      });
  }

  onToolbarPreparingTransport(e) {
    e.toolbarOptions.items.unshift(
      {
        location: 'after',
        widget: 'dxButton',
        options: {
          type: 'success',
          text: translate('Add'),
          onClick: null
        }
      },
    );
  }

  onToolbarPreparingProdutosServicos(e) {
    e.toolbarOptions.items.unshift(
      {
        location: 'after',
        widget: 'dxButton',
        options: {
          type: 'success',
          text: translate('Add'),
          onClick: null
        }
      },
    );
  }

  onProductsTableSelectionChanged(e)
    {
        this.setState({productServicesValues: e.selectedRowKeys.length && e.selectedRowKeys || []});
    }

  async onCalculatePrice()
    {
        let _this = this;

        let checkin = _this.state.checkin_em ? new Date(_this.state.checkin_em) : new Date(_this.frmChekin.checkin_em);
        let checkout = _this.state.checkout > checkin ? new Date(_this.state.checkout) : new Date();

        // O Check-out não pode ser menor que o Check-in
        if(checkin.getTime() >= checkout.getTime())
        {
            notify({ message: translate('ERROR_51'), position: 'top center'}, 'warning', 3000);
            return false;
        }

    let data = {
      checkin: checkin,
      checkout: checkout,
      categoria: _this.props.windows[0].categoria_id,
      tipo_tarifacao: _this.state.tipo_tarifacao,
      algoritmo: _this.state.checkout > _this.state.frmChekin.checkin_em ? 0 : 1
    };

    if(_this.state.frmSimulate.tabela_preco) {
      data.tabela_preco = _this.state.frmSimulate.tabela_preco;
    }

        const promise = sendRequest('/simular-tarifacao', 'POST', data);
        promise.then(function(res){
      //let checkout = new Date(res[1].data_fim);

      checkout.setHours(checkout.getHours() - 3);
      let awake = new Date(checkout);
      awake.setMinutes(awake.getMinutes() - 10);

      if(res && res.length > 0) {
        _this.setState({
          simulateInfo: res,
          checkout: checkout,
          awake: awake
        });
      } else {
        _this.setState({
          checkout: checkout,
          awake: awake
        });
      }

      _this.calcularTotal();
        });
    }

  onToolbarPreparing(e) {
    e.toolbarOptions.items.unshift({
      location: 'after',
      widget: 'dxButton',
      options: {
                icon:'exportpdf',
        hint: translate('INF_65'),
        onClick: this.exportGrid
      }
    },
        {
      location: 'after',
      widget: 'dxButton',
      options: {
                icon: 'arrowup',
        hint: translate('CollapseAll'),
        onClick: this.collapseAllClick
      }
    });
    }

  durationColumn_customizeText = (cellInfo) => {
    let date = new Date(cellInfo.data.duracao);
    return date.toLocaleTimeString();
  }

  entrada_customizeText = (cellInfo) => {
    return cellInfo.data.checkin_em ? formatDate(new Date(cellInfo.data.checkin_em), "dd/MM/yyyy hh:mm:ss") : "";
  }

  saida_customizeText = (cellInfo) => {
    return cellInfo.data.checkout_em ? formatDate(new Date(cellInfo.data.checkout_em), "dd/MM/yyyy hh:mm:ss") : "";
  }

  valorCobrado_customizeText = (cellInfo) => {
    return formatNumber(Number(cellInfo.data.valor_cobrado), consts.fmtCurrency);
  }

  valorSuite_customizeText = (cellInfo) => {
    return formatNumber(Number(cellInfo.data.valor_hospedagem), consts.fmtCurrency);
  }

  valorConsumos_customizeText = (cellInfo) => {
    return formatNumber(Number(cellInfo.data.valor_consumos), consts.fmtCurrency);
  }

  valorLiquido_customizeText = (cellInfo) => {
    return formatNumber(Number(cellInfo.data.valor_consumos), consts.fmtCurrency);
  }

  valorAcrescimos_customizeText = (cellInfo) => {
    return formatNumber(Number(cellInfo.data.valor_consumos), consts.fmtCurrency);
  }

  valorBruto_customizeText = (cellInfo) => {
    return formatNumber(Number(cellInfo.data.valor_consumos), consts.fmtCurrency);
  }

  comanda_customizeText = (cellInfo) => {
    return cellInfo.data.venda_id.toString().padStart(6, '0');
  }

  checkin() {
    let data = {
      checkin_em: formatDate(new Date(this.state.frmChekin.checkin_em), 'Y-m-d\TH:m:s'),
      qtd_hospedes: this.state.frmChekin.qtd_hospedes,
      uh_codigo: this.props.uh_codigo,
      // observacoes: this.state.frmChekin.observacoes,
      // transportes: this.state.transportes,
      // hospedes: this.state.dataSource,
      // produtos: this.state.produtos,
      // servicos: this.state.produtos,
      // imagens: this.state.imagens
    };

    const promise = sendRequest('/vendas/checkin', 'POST', data);
    promise.then((res) => {
      if (res.result) {
        notify({ message: 'Check-In realizado com sucesso!', position: 'top center'}, 'success', 3000);
      }
    })
    .catch((error) => {
      console.log(error);
      notify({ message: 'Erro ao realizar o check-in!', position: 'top center'}, 'error', 3000);
    })
  }

  render() {
    const { isPhysical, srcFormasPagamento, payments, srcDescontoParceiros, srcProdutosservicos, groupsSource, measuresSource, productServicesValues, frmChekin, dataSourceMoviments, fdDiscount, fdPaymentMethod, transportes, tarifacoes, dsTarifacao, dataSource, editRowKey, isDropZoneActive, textVisible, frmGuest, frmSimulate, contacts, addresses, documents, checkout, awake, simulateInfo, vendas } = this.state;

    let tabName = '';
    let tabIndex = this.state.tabIndex;

    switch (tabIndex) {
      default:
      case 0:
        {
          tabName = this.props.status == FREE ? translate('CheckIn') : translate('CheckOut');
        } break;
      case 1:
        {
          tabName = translate('Billing');
        } break;
      case 2:
        {
          tabName = this.state.expand ? translate('FinancialMovement') : translate('Movement');
        } break;
      case 3:
        {
          tabName = translate('ProductsAndServices');
        } break;
      case 4:
        {
          tabName = translate('Guests');
        } break;
      case 5:
        {
          tabName = translate('ModeTransport');
        } break;
      case 6:
        {
          tabName = this.state.expand ? translate('CustomerHistory') : translate('History');
        } break;
      case 7:
        {
          tabName = translate('CheckOut');
        } break;
    }

    return (
      <React.Fragment>
        <PopupForm
          visible={this.state.expand}
          onHiding={this.closeModal}
          dragEnabled={true}
          closeOnOutsideClick={false}
          showTitle={true}
          title={this.props.uh_codigo + ' - ' + tabName}
          width='90%'
          height='80%'
        >
          <ToolbarItem
            widget="dxButton"
            location="after"
            options={this.minimizeBtnOp}
          />

          <ToolbarItem
            toolbar="bottom"
            location="after">
              <div style={{padding: 4, width: "100%", fontSize: 16}} className="rect demo-dark">
                <strong>{translate('ValueReceivable')}: {formatNumber(Number(this.state.valorReceber), consts.fmtCurrency)}</strong>
              </div>
          </ToolbarItem>

          <ToolbarItem
            widget="dxButton"
            toolbar="bottom"
            location="after"
            options={this.checkInBtnOp}
          />

          <ScrollView width='100%' height='100%'>
            <FormPopup labelLocation="top" formData={frmChekin}>
              <TabbedItem itemType="tabbed">

                <TabPanelOptions selectedIndex={this.state.tabIndex} onTitleClick={(e) => this.changeTab(e.itemIndex)} />
                {this.props.status == FREE ?
                  <Tab id="tabCheckin" colCount={3} colSpan={3} hint={translate('CheckIn')} icon="fas fa-door-open">
                    <Item colCount={2} colSpan={2} itemType="group">
                      <Item colCount={1} itemType="group" caption={translate('CheckIn')}>
                        <SimpleItem dataField="checkin_em" editorType="dxDateBox" editorOptions={{type: 'datetime', format: 'fullDate', displayFormat: 'dd/MM/yyyy HH:mm:ss', showClearButton: true, useMaskBehavior: true, adaptivityEnabled: true, disabled: true}}>
                          <Label text={translate('Inflow')} />
                        </SimpleItem>

                        <SimpleItem dataField="qtd_hospedes" editorType="dxNumberBox" editorOptions={{ format: consts.opInteger, min: 1, max: 99, showSpinButtons: true }}>
                          <Label text={translate('Guests')} />
                        </SimpleItem>
                      </Item>

                      <Item colCount={2} itemType="group" caption={translate('MainGuest')}>
                        <SimpleItem colSpan={2} dataField="nome_hospede" >
                          <StringLengthRule max={100} message={translate('ERROR_32') + " (100)"} />
                          <Label text={translate('ClientName')} />
                        </SimpleItem>

                        <SimpleItem colSpan={1} dataField="tipo" editorType="dxLookup" allowEditing={false} editorOptions={{ dataSource: consts.typeDocument, onValueChanged: null, displayExpr: "name", valueExpr: "id", closeOnOutsideClick: true }}>
                          <Label text={translate('Type')+' '+translate('Document')} />
                        </SimpleItem>

                        <SimpleItem colSpan={1} dataField="numero" dataType='dxTextBox'>
                          <Label text={translate('DocumentNo')} />
                          <RequiredRule />
                          <StringLengthRule max={20} message={translate('ERROR_32')+" (20)"} />
                        </SimpleItem>
                      </Item>

                      <Item colCount={2} itemType="group" caption={translate('ModeTransport')}>
                        <SimpleItem dataField="tipo_transporte" editorType="dxLookup" allowEditing={false} editorOptions={{ dataSource: consts.typeTransport, onValueChanged: null, displayExpr: "name", valueExpr: "id", searchEnabled: true, showCancelButton: true, closeOnOutsideClick: true }}>
                          <Label text={translate('Type')} />
                        </SimpleItem>

                        <SimpleItem dataField="placa_transporte" >
                          <StringLengthRule max={8} message={translate('ERROR_32') + " (8)"} />
                          <Label text={translate('Plate')} />
                        </SimpleItem>

                        <SimpleItem dataField="modelo_transporte" >
                          <StringLengthRule max={20} message={translate('ERROR_32') + " (20)"} />
                          <Label text={translate('Model')} />
                        </SimpleItem>

                        <SimpleItem dataField="cor_transporte" editorType="dxLookup" allowEditing={false} editorOptions={{ dataSource: consts.colorsTransport, onValueChanged: null, displayExpr: "name", valueExpr: "id", searchEnabled: true, showCancelButton: true, closeOnOutsideClick: true }}>
                          <Label text={translate('PredominantColor')} />
                        </SimpleItem>
                      </Item>

                      <Item colCount={2} itemType="group" caption={translate('Notes')}>
                        <SimpleItem colSpan={2} dataField="observacoes" editorType="dxTextArea" editorOptions={{ height: 120 }}>
                          <StringLengthRule max={300} message={translate('ERROR_32') + " (300)"} />
                          <Label text=" " showColon={false} />
                        </SimpleItem>
                      </Item>
                    </Item>

                    <Item colCount={1} itemType="group">
                      <Item cssClass="col-12 row m-0 p-0 media-ck">
                        <div className="media-vd">
                          <div className="media-img" style={{ display: (this.state.camera || !this.state.isCam) ? 'block' : 'none' }}>
                            <Magnifier src={this.state.camera} mgShape='square' />
                            <div className="media-text" style={{ display: this.state.isCam ? 'none' : 'block' }}>
                              <h2>{translate('INF_41')}</h2>
                            </div>
                            <div className="group-btns">
                              <Button text={translate('Erase')} type="danger" icon="fa fa-eraser" onClick={this.clearSnapShot} />
                              <Button text={translate('Catch')} type="success" icon="fa fa-plus" onClick={this.catchSnapShot} />
                            </div>
                          </div>
                          <video autoPlay={true} id="web_camera" onClickCapture={this.takeSnapShot} style={{ display: (this.state.camera || !this.state.isCam) ? 'none' : 'block' }}></video>
                        </div>
                        <Carousel images={this.state.imagens} thumbsClick={this.thumbsClick} />
                      </Item>
                    </Item>
                  </Tab>
                  :
                  <Tab colCount={3} colSpan={3} hint={translate('CheckOut')} icon="fas fa-door-closed">
                    <Item colCount={2} colSpan={2} itemType="group">

                    </Item>

                    <Item colCount={1} colSpan={1} itemType="group">
                      <div style={{backgroundColor: '#f3f3f3', padding: 6}}><strong>{translate('BillSummary')}</strong></div>
                      <br />
                      <div style={{backgroundColor: '#f3f3f3', padding: 6}}>
                        <center colSpan={2}><strong>{translate('Information')}</strong></center>
                        <Box
                          direction="row"
                          width="100%"
                          style={{padding: 4}}>
                          <Item ratio={0} baseSize={250}>
                            <div className="rect demo-dark">
                              {translate('AmountPeople')}
                            </div>
                          </Item>
                          <Item ratio={1}>
                            <div className="rect demo-dark">
                              {frmChekin.qtd_hospedes}
                            </div>
                          </Item>
                        </Box>
                        <Box
                          direction="row"
                          width="100%"
                          style={{padding: 4}}>
                          <Item ratio={0} baseSize={250}>
                            <div className="rect demo-dark">
                              {translate('CheckIn')}
                            </div>
                          </Item>
                          <Item ratio={0} baseSize={150}>
                            <div className="rect demo-dark">
                              {formatDate(new Date(this.state.checkin_em), 'dd/MM/yyyy HH:mm:ss')}
                            </div>
                          </Item>
                        </Box>
                        <Box
                          direction="row"
                          width="100%"
                          style={{padding: 4}}>
                          <Item ratio={0} baseSize={250}>
                            <div className="rect demo-dark">
                              {translate('CheckOut')}
                            </div>
                          </Item>
                          <Item ratio={0} baseSize={150}>
                            <div className="rect demo-dark">
                              {formatDate(new Date(checkout), 'dd/MM/yyyy HH:mm:ss')}
                            </div>
                          </Item>
                        </Box>
                        <Box
                          direction="row"
                          width="100%"
                          style={{padding: 4}}>
                          <Item ratio={0} baseSize={250}>
                            <div className="rect demo-dark">
                              {translate('Awakening')}
                            </div>
                          </Item>
                          <Item ratio={0} baseSize={150}>
                            <div className="rect demo-dark">
                            {
                              formatDate(new Date(awake), 'dd/MM/yyyy HH:mm:ss')
                            }
                            </div>
                          </Item>
                        </Box>
                        <Box
                          direction="row"
                          width="100%"
                          style={{padding: 4}}>
                          <Item ratio={0} baseSize={250}>
                            <div className="rect demo-dark">
                              {translate('Permanence')}
                            </div>
                          </Item>
                          <Item ratio={0} baseSize={150}>
                            <div className="rect demo-dark">
                              {simulateInfo ? simulateInfo[1].permanencia : null}
                            </div>
                          </Item>
                        </Box>
                      </div>
                      <br />
                      <div style={{backgroundColor: '#f3f3f3', padding: 6}}>
                        <center colSpan={2}><strong>{translate('Billing')}</strong></center>
                          {
                            simulateInfo ?
                            simulateInfo.map((item, index) =>
                              item.tabela_preco_id ?
                              [
                                <Box
                                  key={index}
                                  direction="row"
                                  width="100%"
                                  style={{padding: 4}}>
                                  <Item ratio={0} baseSize={250}>
                                    <div className="rect demo-dark">
                                      {item.descricao}
                                    </div>
                                  </Item>
                                  <Item ratio={1}>
                                    <div className="rect demo-dark">
                                      {formatNumber(item.valor_cobrado, consts.fmtCurrency)}
                                    </div>
                                  </Item>
                                </Box>
                              ] : null
                            ) : null
                          }

                      </div>
                      <br />
                      <div style={{backgroundColor: '#f3f3f3', padding: 6}}>
                        <center colSpan={2}><strong>{translate('ProductsAndServices')}</strong></center>
                        <Box
                          direction="row"
                          width="100%"
                          style={{padding: 4}}>
                          <Item ratio={0} baseSize={250}>
                            <div className="rect demo-dark">
                              {translate('Services')}
                            </div>
                          </Item>
                          <Item ratio={1}>
                            <div className="rect demo-dark">
                              {formatNumber(Number(this.state.totalServicos), consts.fmtCurrency)}
                            </div>
                          </Item>
                        </Box>
                        <Box
                          direction="row"
                          width="100%"
                          style={{padding: 4}}>
                          <Item ratio={0} baseSize={250}>
                            <div className="rect demo-dark">
                              {translate('Consumption')}
                            </div>
                          </Item>
                          <Item ratio={1}>
                            <div className="rect demo-dark">
                              {formatNumber(Number(this.state.totalConsumo), consts.fmtCurrency)}
                            </div>
                          </Item>
                        </Box>
                      </div>
                      <br />
                      <div style={{backgroundColor: '#f3f3f3', padding: 6}}>
                        <center colSpan={2}><strong>{translate('Subtotal')}</strong></center>
                        <Box
                          direction="row"
                          width="100%"
                          style={{padding: 4}}>
                          <Item ratio={0} baseSize={250}>
                            <div className="rect demo-dark">
                              {translate('Advance')}
                            </div>
                          </Item>
                          <Item ratio={1}>
                            <div className="rect demo-dark">
                              {formatNumber(Number(this.state.totalAdiantamento), consts.fmtCurrency)}
                            </div>
                          </Item>
                        </Box>
                        <Box
                          direction="row"
                          width="100%"
                          style={{padding: 4}}>
                          <Item ratio={0} baseSize={250}>
                            <div className="rect demo-dark">
                              {translate('Additions')}
                            </div>
                          </Item>
                          <Item ratio={1}>
                            <div className="rect demo-dark">
                              {formatNumber(Number(this.state.totalAcrescimos), consts.fmtCurrency)}
                            </div>
                          </Item>
                        </Box>
                        <Box
                          direction="row"
                          width="100%"
                          style={{padding: 4}}>
                          <Item ratio={0} baseSize={250}>
                            <div className="rect demo-dark">
                              {translate('Discounts')}
                            </div>
                          </Item>
                          <Item ratio={1}>
                            <div className="rect demo-dark">
                              {formatNumber(Number(this.state.totalDescontos), consts.fmtCurrency)}
                            </div>
                          </Item>
                        </Box>
                      </div>
                      <div style={{border: "solid", borderWidth: 2, borderColor: "green", marginTop: 8}}>
                        <Box
                          direction="row"
                          width="100%"
                          style={{padding: 4}}>
                          <Item ratio={0} baseSize={250}>
                            <div className="rect demo-dark">
                              <strong>{translate('ValueReceivable')}</strong>
                            </div>
                          </Item>
                          <Item ratio={1}>
                            <div className="rect demo-dark">
                              <strong>{formatNumber(Number(this.state.valorReceber), consts.fmtCurrency)}</strong>
                            </div>
                          </Item>
                        </Box>
                      </div>
                      <div style={{border: "solid", borderWidth: 2, borderColor: "orange", marginTop: 8}}>
                        <Box
                          direction="row"
                          width="100%"
                          style={{padding: 4}}>
                          <Item ratio={0} baseSize={250}>
                            <div className="rect demo-dark">
                              <strong>{translate('ChangeMoney')}</strong>
                            </div>
                          </Item>
                          <Item ratio={1}>
                            <div className="rect demo-dark">
                              <strong>{formatNumber(Number(this.state.valorTroco), consts.fmtCurrency)}</strong>
                            </div>
                          </Item>
                        </Box>
                      </div>
                    </Item>
                  </Tab>
                }

                <Tab hint={translate('Billing')} icon="fas fa-money-bill-wave">
                  <Item colCount={2} colSpan={2} itemType="group">
                    <FormPopup labelLocation="top" colCount={3} colSpan={1} formData={frmSimulate}>
                      <SimpleItem dataField="categoria"
                        visible={false}
                        editorType="dxTextBox"
                        editorOptions={{value: this.props.windows[0].categoria_id}}>
                      </SimpleItem>
                      <SimpleItem dataField="checkin"
                        visible={false}
                        editorType="dxTextBox"
                        editorOptions={{value: frmChekin.checkin_em}}>
                      </SimpleItem>
                      {/* <SimpleItem dataField="tabela_preco"
                          editorType="dxLookup"
                          editorOptions={{
                          dataSource:tarifacoes,
                          valueExpr:"tabela_preco_id",
                          displayExpr:"descricao",
                          searchEnabled:false,
                          showClearButton: false,
                          closeOnOutsideClick: true}}>
                        <Label text={translate('PriceTable')}/>
                        <RequiredRule/>
                      </SimpleItem> */}
                    </FormPopup>

                    <DataGrid
                      id="gridTarifacao"
                      ref={this.dataGridTarifacaoRef}
                      dataSource={dsTarifacao}
                      repaintChangesOnly={true}
                      keyExpr="tarifacao_id"
                      allowColumnReordering={true}
                      allowColumnResizing={true}
                      showBorders={true}
                      onToolbarPreparing={this.onToolbarPreparingBill}
                      onRowRemoving={this.onRowRemovingBilling}
                      onRowRemoved={this.onRowRemovedBiling}
                      onInitNewRow={null}
                      onEditingStart={null}
                      columnHidingEnabled={true}>
                        <Editing
                          allowDeleting={true}
                          useIcons={true}>
                        </Editing>

                        <Scrolling mode="infinite" />
                        <Paging enabled={true} pageSize={10} />
                        <Pager showPageSizeSelector={true} allowedPageSizes={[10, 20, 30, 40, 50, 100]} showInfo={true} />
                        <Sorting mode="multiple" />

                        <Column
                          dataField="tarifacao_id"
                          caption={translate('Code')}
                          dataType="string"
                        />
                        <Column
                          dataField="descricao"
                          caption={translate('Description')}
                          dataType="string"
                        />
                        <Column
                          dataField="duracao_tarifacao"
                          caption={translate('Duration')}
                          cellRender={this.durationColumn_customizeText}
                        />
                        <Column
                          dataField="valor_cobrado"
                          caption={translate('ValueTable')}
                          cellRender={this.valorCobrado_customizeText}
                        />
                        <Column
                          dataField="horario_lancamento"
                          caption={translate('LaunchTime')}
                          dataType="datetime"
                        />
                    </DataGrid>
                  </Item>
                </Tab>

                <Tab colCount={3} colSpan={3} hint={translate('FinancialMovement')} icon="fas fa-dollar-sign">
                  <Item colCount={2} colSpan={2} itemType="group">
                    <FormPopup labelLocation="top" colCount={2} className={"mb-10"} formData={fdPaymentMethod} visible={this.state.paymentMethodVisible}>
                      <SimpleItem dataField="forma_pagamento_id" editorType="dxLookup" editorOptions={{ dataSource: srcFormasPagamento, displayExpr: 'descricao', valueExpr: 'forma_pagamento_id', closeOnOutsideClick: true }}>
                        <RequiredRule />
                        <Label text={translate('PaymentMethods')} />
                      </SimpleItem>
                      <SimpleItem dataField="valor" editorType="dxNumberBox" editorOptions={Object.assign({ min: 0.1 }, consts.opCurrency)}>
                        <Label text={translate('Value')} />
                      </SimpleItem>
                    </FormPopup>
                    <FormPopup labelLocation="top" colCount={2} className={"mb-10"} formData={fdDiscount} visible={this.state.discountVisible}>
                      <SimpleItem dataField="tipo_desconto" editorType="dxLookup"
                        editorOptions={{
                          dataSource: consts.discountType,
                          displayExpr: 'name',
                          valueExpr: 'id',
                          closeOnOutsideClick: true
                        }}>
                        <RequiredRule />
                        <Label text={translate('Discount')} />
                      </SimpleItem>
                      <SimpleItem dataField="valor" editorType="dxNumberBox" editorOptions={Object.assign({ min: 0.1 }, consts.opCurrency)}>
                        <Label text={translate('Value')} />
                      </SimpleItem>
                    </FormPopup>
                    <DataGrid
                      ref={this.dataGridMovimentsRef}
                      width="100%"
                      dataSource={payments}
                      repaintChangesOnly={true}
                      allowColumnReordering={true}
                      allowColumnResizing={true}
                      showBorders={true}
                      onToolbarPreparing={this.onToolbarPreparingMoviments}
                      columnHidingEnabled={true}>
                      <Grouping autoExpandAll={this.state.expanded} />
                      <Selection mode="multiple" />
                      <Paging defaultPageSize={20} />
                      <Pager showPageSizeSelector={true} allowedPageSizes={[10, 20, 30, 40, 50, 100]} showInfo={true} />
                      <Sorting mode="multiple" />
                      <FilterRow visible={true} applyFilter="auto" />
                      <HeaderFilter visible={false} />
                      <SearchPanel visible={false} />
                      <Editing
                        allowDeleting={true}
                        useIcons={true}
                      />
                      <Column
                        dataField="cod_movimento"
                        caption="ID"
                        visible={false}>
                      </Column>
                      <Column
                        dataField="movimentacao"
                        caption={translate('Movements')}>
                      </Column>
                      <Column
                        dataField="valor"
                        caption={translate('Value')}
                        dataType="number"
                        format={consts.fmtCurrency}
                        width={100} />
                      <Column
                        dataField="data"
                        caption={translate('Date')}
                        dataType="datetime"
                        editorOptions={consts.fmtDatetime}
                        width={140} />
                    </DataGrid>
                  </Item>

                  <Item colCount={1} colSpan={1} itemType="group">
                    <div style={{backgroundColor: '#f3f3f3', padding: 6}}><strong>{translate('BillSummary')}</strong></div>
                    <br />
                    <div style={{backgroundColor: '#f3f3f3', padding: 6}}>
                      <center colSpan={2}><strong>{translate('Information')}</strong></center>
                      <Box
                        direction="row"
                        width="100%"
                        style={{padding: 4}}>
                        <Item ratio={0} baseSize={250}>
                          <div className="rect demo-dark">
                            {translate('AmountPeople')}
                          </div>
                        </Item>
                        <Item ratio={1}>
                          <div className="rect demo-dark">
                            {frmChekin.qtd_hospedes}
                          </div>
                        </Item>
                      </Box>
                      <Box
                        direction="row"
                        width="100%"
                        style={{padding: 4}}>
                        <Item ratio={0} baseSize={250}>
                          <div className="rect demo-dark">
                            {translate('CheckIn')}
                          </div>
                        </Item>
                        <Item ratio={0} baseSize={150}>
                          <div className="rect demo-dark">
                            {formatDate(new Date(this.state.checkin_em), 'dd/MM/yyyy HH:mm:ss')}
                          </div>
                        </Item>
                      </Box>
                      <Box
                        direction="row"
                        width="100%"
                        style={{padding: 4}}>
                        <Item ratio={0} baseSize={250}>
                          <div className="rect demo-dark">
                            {translate('CheckOut')}
                          </div>
                        </Item>
                        <Item ratio={0} baseSize={150}>
                          <div className="rect demo-dark">
                            {formatDate(new Date(checkout), 'dd/MM/yyyy HH:mm:ss')}
                          </div>
                        </Item>
                      </Box>
                      <Box
                        direction="row"
                        width="100%"
                        style={{padding: 4}}>
                        <Item ratio={0} baseSize={250}>
                          <div className="rect demo-dark">
                            {translate('Awakening')}
                          </div>
                        </Item>
                        <Item ratio={0} baseSize={150}>
                          <div className="rect demo-dark">
                          {
                            formatDate(new Date(awake), 'dd/MM/yyyy HH:mm:ss')
                          }
                          </div>
                        </Item>
                      </Box>
                      <Box
                        direction="row"
                        width="100%"
                        style={{padding: 4}}>
                        <Item ratio={0} baseSize={250}>
                          <div className="rect demo-dark">
                            {translate('Permanence')}
                          </div>
                        </Item>
                        <Item ratio={0} baseSize={150}>
                          <div className="rect demo-dark">
                            {simulateInfo ? simulateInfo[1].permanencia : null}
                          </div>
                        </Item>
                      </Box>
                    </div>
                    <br />
                    <div style={{backgroundColor: '#f3f3f3', padding: 6}}>
                      <center colSpan={2}><strong>{translate('Billing')}</strong></center>
                        {
                          simulateInfo ?
                          simulateInfo.map((item, index) =>
                            item.tabela_preco_id ?
                            [
                              <Box
                                key={index}
                                direction="row"
                                width="100%"
                                style={{padding: 4}}>
                                <Item ratio={0} baseSize={250}>
                                  <div className="rect demo-dark">
                                    {item.descricao}
                                  </div>
                                </Item>
                                <Item ratio={1}>
                                  <div className="rect demo-dark">
                                    {formatNumber(item.valor_cobrado, consts.fmtCurrency)}
                                  </div>
                                </Item>
                              </Box>
                            ] : null
                          ) : null
                        }

                    </div>
                    <br />
                    <div style={{backgroundColor: '#f3f3f3', padding: 6}}>
                      <center colSpan={2}><strong>{translate('ProductsAndServices')}</strong></center>
                      <Box
                        direction="row"
                        width="100%"
                        style={{padding: 4}}>
                        <Item ratio={0} baseSize={250}>
                          <div className="rect demo-dark">
                            {translate('Services')}
                          </div>
                        </Item>
                        <Item ratio={1}>
                          <div className="rect demo-dark">
                            {formatNumber(Number(this.state.totalServicos), consts.fmtCurrency)}
                          </div>
                        </Item>
                      </Box>
                      <Box
                        direction="row"
                        width="100%"
                        style={{padding: 4}}>
                        <Item ratio={0} baseSize={250}>
                          <div className="rect demo-dark">
                            {translate('Consumption')}
                          </div>
                        </Item>
                        <Item ratio={1}>
                          <div className="rect demo-dark">
                            {formatNumber(Number(this.state.totalConsumo), consts.fmtCurrency)}
                          </div>
                        </Item>
                      </Box>
                    </div>
                    <br />
                    <div style={{backgroundColor: '#f3f3f3', padding: 6}}>
                      <center colSpan={2}><strong>{translate('Subtotal')}</strong></center>
                      <Box
                        direction="row"
                        width="100%"
                        style={{padding: 4}}>
                        <Item ratio={0} baseSize={250}>
                          <div className="rect demo-dark">
                            {translate('Advance')}
                          </div>
                        </Item>
                        <Item ratio={1}>
                          <div className="rect demo-dark">
                            {formatNumber(Number(this.state.totalAdiantamento), consts.fmtCurrency)}
                          </div>
                        </Item>
                      </Box>
                      <Box
                        direction="row"
                        width="100%"
                        style={{padding: 4}}>
                        <Item ratio={0} baseSize={250}>
                          <div className="rect demo-dark">
                            {translate('Additions')}
                          </div>
                        </Item>
                        <Item ratio={1}>
                          <div className="rect demo-dark">
                            {formatNumber(Number(this.state.totalAcrescimos), consts.fmtCurrency)}
                          </div>
                        </Item>
                      </Box>
                      <Box
                        direction="row"
                        width="100%"
                        style={{padding: 4}}>
                        <Item ratio={0} baseSize={250}>
                          <div className="rect demo-dark">
                            {translate('Discounts')}
                          </div>
                        </Item>
                        <Item ratio={1}>
                          <div className="rect demo-dark">
                            {formatNumber(Number(this.state.totalDescontos), consts.fmtCurrency)}
                          </div>
                        </Item>
                      </Box>
                    </div>
                    <div style={{border: "solid", borderWidth: 2, borderColor: "green", marginTop: 8}}>
                      <Box
                        direction="row"
                        width="100%"
                        style={{padding: 4}}>
                        <Item ratio={0} baseSize={250}>
                          <div className="rect demo-dark">
                            <strong>{translate('ValueReceivable')}</strong>
                          </div>
                        </Item>
                        <Item ratio={1}>
                          <div className="rect demo-dark">
                            <strong>{formatNumber(Number(this.state.valorReceber), consts.fmtCurrency)}</strong>
                          </div>
                        </Item>
                      </Box>
                    </div>
                    <div style={{border: "solid", borderWidth: 2, borderColor: "orange", marginTop: 8}}>
                      <Box
                        direction="row"
                        width="100%"
                        style={{padding: 4}}>
                        <Item ratio={0} baseSize={250}>
                          <div className="rect demo-dark">
                            <strong>{translate('ChangeMoney')}</strong>
                          </div>
                        </Item>
                        <Item ratio={1}>
                          <div className="rect demo-dark">
                            <strong>{formatNumber(Number(this.state.valorTroco), consts.fmtCurrency)}</strong>
                          </div>
                        </Item>
                      </Box>
                    </div>
                  </Item>
                </Tab>

                <Tab hint={translate('ProductsAndServices')} icon="fas fa-concierge-bell">
                  <FormPopup colCount={4} colSpan={4} labelLocation="top" ref={null} formData={null}>
                    <Item colSpan={3} isRequired={true}>
                      <DropDownBox
                          dataSource={srcProdutosservicos}
                          keyExpr="produto_id"
                          displayExpr={consts.displayCodigoDescricao}
                          placeholder={translate('Select')}
                          value={productServicesValues}>
                        <DataGrid
                          dataSource={srcProdutosservicos}
                          hoverStateEnabled={true}
                          selectedRowKeys={productServicesValues}
                          onSelectionChanged={this.onProductsTableSelectionChanged}
                          columnHidingEnabled={true}
                          height={255}
                          >
                          <Selection mode="single" />
                          <Scrolling mode="infinite" />
                          <FilterRow visible={true} />
                          <Paging enabled={false} pageSize={6}/>
                          <Column
                            dataField="codigo"
                            caption={translate('Code')}
                            width={80}
                            alignment="center"
                            allowEditing={false}
                          />

                          <Column
                            dataField="descricao"
                            caption={translate('Description')}
                            dataType="string"
                          />

                          <Column
                            dataField="grupo_id"
                            caption={translate('Group')}>
                            <Lookup dataSource={groupsSource} valueExpr="produto_grupo_id" displayExpr="descricao"/>
                          </Column>

                          <Column
                            dataField="materia_prima"
                            caption={translate('Feedstock')}
                            dataType="boolean"
                            cellRender={YesCell}
                            width={80}
                            falseText={translate('No')}
                            trueText={translate('Yes')}
                            alignment="center"
                          />

                          <Column
                            dataField="composto"
                            caption={translate('Compound')}
                            dataType="boolean"
                            cellRender={YesCell}
                            width={80}
                            falseText={translate('No')}
                            trueText={translate('Yes')}
                            alignment="center"
                          />

                          <Column
                            dataField="exibe_cardapio"
                            caption={translate('ShowOnMenu')}
                            dataType="boolean"
                            cellRender={YesCell}
                            width={80}
                            falseText={translate('No')}
                            trueText={translate('Yes')}
                            alignment="center"
                          />

                          <Column
                            dataField="valor"
                            caption={translate('Value')}
                            dataType="number"
                            format={consts.fmtCurrency}
                            width={140}
                          />

                          <Column
                            dataField="un_medida_id"
                            caption={translate('UnitsMeasure')}>
                            <Lookup dataSource={measuresSource} valueExpr="un_medida_id" displayExpr="descricao"/>
                          </Column>

                        </DataGrid>
                      </DropDownBox>
                      <Label text={translate('ProductsAndServices')}/>
                    </Item>
                    <SimpleItem dataField="quantidade" isRequired={true} editorType="dxNumberBox" editorOptions={{format: consts.opInteger, min: 1, max: 999, showSpinButtons:true}}>
                                          <Label text={translate('Amount')}/>
                                        </SimpleItem>

                    <SimpleItem dataField="tipo_alteracao" editorType="dxLookup" allowEditing={false} editorOptions={{ dataSource: consts.typeChange, onValueChanged: null, displayExpr: "name", valueExpr: "id", showCancelButton: true, closeOnOutsideClick: true }}>
                      <Label text={translate('Type')+' '+translate('Adjustment')} />
                    </SimpleItem>

                    <SimpleItem dataField="valor_alteracao" editorType="dxNumberBox" editorOptions={{format: consts.fmtCurrency, min: 0.0, max: 9999}}>
                                            <Label text={translate('Value')+' '+translate('Adjustment')}/>
                                        </SimpleItem>

                    <SimpleItem colSpan={2} dataField="variacao" editorType="dxTextArea" editorOptions={{height: 60}}>
                      <StringLengthRule max={150} message={translate('ERROR_32') + " (150)"} />
                      <Label text={translate('Variation')} showColon={false} />
                    </SimpleItem>

                  </FormPopup>

                  <DataGrid
                    id="gridContainer"
                    ref={this.dataGridProductsServicesRef}
                    dataSource={srcProdutosservicos}
                    repaintChangesOnly={true}
                    //keyExpr="produtos_servicos_id"
                    allowColumnReordering={true}
                    allowColumnResizing={true}
                    showBorders={true}
                    onSaving={null}
                    onEditingStart={null}
                    onToolbarPreparing={this.onToolbarPreparingProdutosServicos}
                    columnHidingEnabled={true}>
                    <Scrolling mode="infinite" />
                    <Paging enabled={true} pageSize={10} />
                    <Pager showPageSizeSelector={true} allowedPageSizes={[10, 20, 30, 40, 50, 100]} showInfo={true} />
                    <Sorting mode="multiple" />
                    <ColumnFixing enabled={true} />
                    <FilterRow visible={true} applyFilter="auto" />
                    <HeaderFilter visible={false} />
                    <GroupPanel visible={true} />
                    <Export enabled={true} allowExportSelectedData={true} fileName={document.title} />

                    <Editing
                      mode="popup"
                      allowUpdating={true}
                      allowDeleting={true}
                      useIcons={true}>
                      <Popup title={translate('ProductsAndServices')} showTitle={true} width="90%" height={300} />
                        <FormPopup colCount={4} colSpan={4} labelLocation="top" ref={null} formData={null}>
                          <Item colSpan={4} isRequired={true}>
                            <DropDownBox
                                dataSource={srcProdutosservicos}
                                keyExpr="produto_id"
                                displayExpr={consts.displayCodigoDescricao}
                                placeholder={translate('Select')}
                                value={productServicesValues}>
                              <DataGrid
                                dataSource={srcProdutosservicos}
                                hoverStateEnabled={true}
                                selectedRowKeys={productServicesValues}
                                onSelectionChanged={this.onProductsTableSelectionChanged}
                                columnHidingEnabled={true}
                                height={255}
                                >
                                <Selection mode="single" />
                                <Scrolling mode="infinite" />
                                <FilterRow visible={true} />
                                <Paging enabled={false} pageSize={6}/>
                                <Column
                                  dataField="codigo"
                                  caption={translate('Code')}
                                  width={80}
                                  alignment="center"
                                  allowEditing={false}
                                />

                                <Column
                                  dataField="descricao"
                                  caption={translate('Description')}
                                  dataType="string"
                                />

                                <Column
                                  dataField="grupo_id"
                                  caption={translate('Group')}>
                                  <Lookup dataSource={groupsSource} valueExpr="produto_grupo_id" displayExpr="descricao"/>
                                </Column>

                                <Column
                                  dataField="materia_prima"
                                  caption={translate('Feedstock')}
                                  dataType="boolean"
                                  cellRender={YesCell}
                                  width={80}
                                  falseText={translate('No')}
                                  trueText={translate('Yes')}
                                  alignment="center"
                                />

                                <Column
                                  dataField="composto"
                                  caption={translate('Compound')}
                                  dataType="boolean"
                                  cellRender={YesCell}
                                  width={80}
                                  falseText={translate('No')}
                                  trueText={translate('Yes')}
                                  alignment="center"
                                />

                                <Column
                                  dataField="exibe_cardapio"
                                  caption={translate('ShowOnMenu')}
                                  dataType="boolean"
                                  cellRender={YesCell}
                                  width={80}
                                  falseText={translate('No')}
                                  trueText={translate('Yes')}
                                  alignment="center"
                                />

                                <Column
                                  dataField="valor"
                                  caption={translate('Value')}
                                  dataType="number"
                                  format={consts.fmtCurrency}
                                  width={140}
                                />

                                <Column
                                  dataField="un_medida_id"
                                  caption={translate('UnitsMeasure')}>
                                  <Lookup dataSource={measuresSource} valueExpr="un_medida_id" displayExpr="descricao"/>
                                </Column>
                              </DataGrid>
                            </DropDownBox>
                            <Label text={translate('Product')}/>
                          </Item>

                          <SimpleItem dataField="quantidade" isRequired={true} editorType="dxNumberBox" editorOptions={{format: consts.opInteger, min: 1, max: 999, showSpinButtons:true}}>
                            <Label text={translate('Amount')}/>
                          </SimpleItem>

                          <SimpleItem dataField="tipo_alteracao" editorType="dxLookup" allowEditing={false} editorOptions={{ dataSource: consts.typeChange, onValueChanged: null, displayExpr: "name", valueExpr: "id", showCancelButton: true, closeOnOutsideClick: true }}>
                            <Label text={translate('Type')+' '+translate('Adjustment')} />
                          </SimpleItem>

                          <SimpleItem dataField="valor_alteracao" editorType="dxNumberBox" editorOptions={{format: consts.fmtCurrency, min: 0.0, max: 9999}}>
                            <Label text={translate('Value')+' '+translate('Adjustment')}/>
                          </SimpleItem>

                          <SimpleItem colSpan={2} dataField="variacao_pedido" editorType="dxTextArea" editorOptions={{height: 60}}>
                            <StringLengthRule max={150} message={translate('ERROR_32') + " (150)"} />
                            <Label text={translate('Variation')} showColon={false} />
                          </SimpleItem>
                        </FormPopup>
                    </Editing>

                    <Column
                      dataField="codigo"
                      caption={translate('Code')}
                      width={80}
                      alignment="center"
                      allowEditing={false}
                    />

                    <Column
                      dataField="descricao"
                      caption={translate('Description')}
                      dataType="string"
                    />

                    <Column
                      dataField="grupo_id"
                      caption={translate('Group')}>
                      <Lookup dataSource={groupsSource} valueExpr="produto_grupo_id" displayExpr="descricao"/>
                    </Column>

                    <Column
                      dataField="materia_prima"
                      caption={translate('Feedstock')}
                      dataType="boolean"
                      cellRender={YesCell}
                      width={80}
                      falseText={translate('No')}
                      trueText={translate('Yes')}
                      alignment="center"
                    />

                    <Column
                      dataField="composto"
                      caption={translate('Compound')}
                      dataType="boolean"
                      cellRender={YesCell}
                      width={80}
                      falseText={translate('No')}
                      trueText={translate('Yes')}
                      alignment="center"
                    />

                    <Column
                      dataField="exibe_cardapio"
                      caption={translate('ShowOnMenu')}
                      dataType="boolean"
                      cellRender={YesCell}
                      width={80}
                      falseText={translate('No')}
                      trueText={translate('Yes')}
                      alignment="center"
                    />

                    <Column
                      dataField="valor"
                      caption={translate('Value')}
                      dataType="number"
                      format={consts.fmtCurrency}
                      width={140}
                    />

                    <Column
                      dataField="un_medida_id"
                      caption={translate('UnitsMeasure')}>
                      <Lookup dataSource={measuresSource} valueExpr="un_medida_id" displayExpr="descricao"/>
                    </Column>

                    <Column
                      dataField="quantidade"
                      caption={translate('Amount')}
                      dataType="number"
                    />

                    <Column
                      dataField="tipo_alteracao"
                      caption={translate('Type')+' '+translate('Adjustment')}>
                      <Lookup dataSource={consts.typeChange} valueExpr="id" displayExpr="name"/>
                    </Column>

                    <Column
                      dataField="valor_alteracao"
                      caption={translate('Value')+' '+translate('Adjustment')}
                      dataType="number"
                      format={consts.fmtCurrency}
                      width={140}
                    />

                    <Column
                      dataField="variacao_pedido"
                      caption={translate('Variation')}
                      dataType="string"
                    />

                    <Summary>
                      <TotalItem
                        column="codigo"
                        summaryType="count"
                        displayFormat={"{0}"}/>
                    </Summary>
                  </DataGrid>
                </Tab>

                <Tab hint={translate('Guests')} icon="fas fa-suitcase-rolling">
                  <DataGrid
                    id="gridContainer"
                    ref={this.dataGridRef}
                    dataSource={dataSource}
                    repaintChangesOnly={true}
                    allowColumnReordering={true}
                    allowColumnResizing={true}
                    showBorders={true}
                    onSaving={this.onSaving}
                    onEditingStart={this.onEditingStartGuest}
                    onInitNewRow={this.onInitNewRow}
                    onToolbarPreparing={this.onToolbarPreparing}
                    columnHidingEnabled={true}>

                    <Grouping autoExpandAll={this.state.expanded} />
                    <Selection mode="multiple" />
                    <Editing
                      mode="popup"
                      refreshMode="reshape"
                      allowUpdating={true}
                      allowAdding={true}
                      allowDeleting={false}
                      useIcons={true}>

                      <Popup title={translate('Guests')} showTitle={true} width="90%"/>
                      <FormPopup labelLocation="top">
                        <TabbedItem colCount={2} colSpan={2} itemType="tabbed">
                          <Tab title={translate('Guest')}>
                            <FormPopup labelLocation="top" ref={this.fpGuest} colCount={2} colSpan={2} formData={frmGuest}>
                              <SimpleItem dataField="ativo" helpText={translate('INF_38')} editorType="dxCheckBox">
                                <Label text={translate('Situation')}/>
                              </SimpleItem>
                              <SimpleItem dataField="tipo" editorType="dxLookup" allowEditing={false} editorOptions={{dataSource: consts.typePerson,  onValueChanged: this.typePersonChange, displayExpr: "name", valueExpr: "id", searchEnabled: false, showCancelButton: false, closeOnOutsideClick: true}} isRequired={true}>
                                <Label text={translate('Person')}/>
                              </SimpleItem>
                              <SimpleItem dataField="nome" visible={isPhysical} isRequired={true}>
                                <StringLengthRule max={30} message={translate('ERROR_32')+" (30)"} />
                                <Label text={translate('Name')}/>
                              </SimpleItem>
                              <SimpleItem dataField="sobrenome" visible={isPhysical} isRequired={true}>
                                <StringLengthRule max={70} message={translate('ERROR_32')+" (70)"} />
                                <Label text={translate('LastName')}/>
                              </SimpleItem>
                              <SimpleItem dataField="razao_social" visible={!isPhysical} isRequired={true}>
                                <StringLengthRule max={50} message={translate('ERROR_32')+" (50)"} />
                                <Label text={translate('SocialReason')}/>
                              </SimpleItem>
                              <SimpleItem dataField="nome_fantasia" visible={!isPhysical} isRequired={true}>
                                <StringLengthRule max={50} message={translate('ERROR_32')+" (50)"} />
                                <Label text={translate('FantasyName')}/>
                              </SimpleItem>
                              <SimpleItem dataField="cpf_cnpj" dataType='dxTextBox' editorOptions={{ mask: frmGuest.tipo == 0 ? "000.000.000-00" : "00.000.000/0000-00", maskInvalidMessage: isPhysical ? translate('INF_60') : translate('INF_61')}}>
                                <Label text={frmGuest.tipo == 0 ? translate('CPF_2') : translate('CNPJ_2')} isRequired={true}/>
                                <AsyncRule message={translate('ERROR_45')} validationCallback={this.asyncCpfCnpjValidation} />
                              </SimpleItem>
                              <SimpleItem dataField="genero" editorType="dxLookup" editorOptions={{dataSource: consts.typeGenre, displayExpr: "name", valueExpr: "id", searchEnabled: false, showCancelButton: false, closeOnOutsideClick: true}} visible={isPhysical}>
                                <Label text={translate('Genre')}/>
                              </SimpleItem>
                              <SimpleItem dataField="data_nasc" editorType="dxDateBox" visible={frmGuest.tipo == 0} editorOptions={consts.opDate}>
                                <Label text={translate('DateOfBirth')}/>
                              </SimpleItem>
                              <SimpleItem dataField="estado_civil" editorType="dxLookup" editorOptions={{dataSource: consts.maritalStatus, displayExpr: 'name', valueExpr: 'id', showClearButton: true, closeOnOutsideClick: true}} visible={isPhysical}>
                                <Label text={translate('MaritalStatus')}/>
                              </SimpleItem>
                              <SimpleItem dataField="nacionalidade" visible={frmGuest.tipo == 0}>
                                <StringLengthRule max={50} message={translate('ERROR_32')+" (50)"} />
                                <Label text={translate('Nationality')}/>
                              </SimpleItem>
                              <SimpleItem colSpan={2} dataField="observacao" editorType="dxTextArea">
                                <Label text={translate('Notes')}/>
                              </SimpleItem>
                            </FormPopup>
                          </Tab>
                          <Tab title={translate('Addresses')}>
                            <div className="pb-3 dx-field-item-help-text">{translate('INF_5')}</div>
                            <DataGrid
                              id="gridAddressesContainer"
                              dataSource={addresses}
                              repaintChangesOnly={true}
                              allowColumnReordering={true}
                              allowColumnResizing={true}
                              showBorders={true}
                              onToolbarPreparing={this.onToolbarPreparingAddress}
                              columnHidingEnabled={true}>

                              <Grouping autoExpandAll={this.state.expandedAddress} />
                              <Selection mode="multiple" />
                              <Editing
                                mode="popup"
                                allowUpdating={true}
                                allowAdding={true}
                                allowDeleting={false}
                                useIcons={true}>

                                <Popup title={translate('Address')} showTitle={true} width="90%" height="400px"/>

                                <Form labelLocation="top">
                                  <Item itemType="group" colCount={2} colSpan={2}>
                                    <Item dataField="principal" />
                                    <Item dataField="ativo" />
                                    <Item dataField="endereco" isRequired={true}/>
                                    <Item dataField="estado" isRequired={true}/>
                                    <Item dataField="cidade" isRequired={true}/>
                                    <Item dataField="bairro" isRequired={true}/>
                                    <Item dataField="numero" />
                                    <Item dataField="cep" isRequired={true}/>
                                    <Item dataField="complemento" />
                                  </Item>
                                </Form>

                              </Editing>

                              <Paging defaultPageSize={20} />
                              <Pager showPageSizeSelector={true} allowedPageSizes={[10, 20, 30, 40, 50, 100]} showInfo={true} />
                              <Sorting mode="multiple" />
                              <ColumnChooser enabled={true} />
                              <ColumnFixing enabled={true} />
                              <FilterRow visible={true} applyFilter="auto" />
                              <HeaderFilter visible={false} />
                              <SearchPanel visible={true} />
                              <GroupPanel visible={true} />

                              <Export enabled={true} allowExportSelectedData={true} fileName={translate('Addresses')} />

                              <Column
                                dataField="endereco"
                                caption={translate('Address')}
                                dataType="string">
                                <StringLengthRule max={100} message={translate('ERROR_32')+" (100)"} />
                              </Column>

                              <Column
                                dataField="estado"
                                caption={translate('State')}
                                width={80}>
                                <Lookup dataSource={consts.sourceStates} displayExpr='name' valueExpr='id'/>
                              </Column>

                              <Column
                                dataField="cidade"
                                caption={translate('City')}
                                dataType="string">
                                <StringLengthRule max={50} message={translate('ERROR_32')+" (50)"} />
                              </Column>

                              <Column
                                dataField="bairro"
                                caption={translate('Neighborhood')}
                                dataType="string">
                                <StringLengthRule max={30} message={translate('ERROR_32')+" (30)"} />
                              </Column>

                              <Column
                                dataField="numero"
                                caption={translate('Number')}
                                dataType="string"
                                width={80}>
                                <StringLengthRule max={8} message={translate('ERROR_32')+" (8)"} />
                              </Column>

                              <Column
                                dataField="cep"
                                caption={translate('ZipCode')}
                                dataType='dxTextBox'
                                editorOptions={{ mask: "00.000-000", maskInvalidMessage: translate('INF_62')}}
                                width={80}/>

                              <Column
                                dataField="complemento"
                                caption={translate('Complement')}
                                visible={false}
                                width={140}>
                                <StringLengthRule max={100} message={translate('ERROR_32')+" (100)"} />
                              </Column>

                              <Column
                                dataField="principal"
                                caption={translate('Main')}
                                dataType="boolean"
                                cellRender={YesCell}
                                allowHeaderFiltering={false}
                                width={80}
                                falseText={translate('No')}
                                trueText={translate('Yes')}
                                alignment="center"
                              />

                              <Column
                                dataField="ativo"
                                caption={translate('Situation')}
                                dataType="boolean"
                                cellRender={ActiveCell}
                                allowHeaderFiltering={false}
                                width={80}
                                falseText={translate('Inactive')}
                                trueText={translate('Active')}
                                alignment="center"
                              />

                              <Summary>
                                <GroupItem
                                  column="endereco"
                                  summaryType="count"
                                  displayFormat={"{0}"}
                                  alignByColumn={true}
                                  showInGroupFooter={true}/>
                                <GroupItem
                                  column="endereco"
                                  summaryType="count"
                                  displayFormat={"{0}"}
                                  alignByColumn={true} />
                                <TotalItem
                                  column="endereco"
                                  summaryType="count"
                                  displayFormat={"{0}"}/>
                              </Summary>
                            </DataGrid>
                          </Tab>
                          <Tab title={translate('FormsContact')}>
                            <DataGrid
                              id="gridContactsContainer"
                              dataSource={contacts}
                              repaintChangesOnly={true}
                              allowColumnReordering={true}
                              allowColumnResizing={true}
                              showBorders={true}
                              onRowRemoved={this.onRowRemovedContact}
                              onToolbarPreparing={this.onToolbarPreparingContact}
                              columnHidingEnabled={true}>

                              <Grouping autoExpandAll={this.state.expandedContact} />
                              <Selection mode="multiple" />
                              <Editing
                                mode="popup"
                                allowUpdating={true}
                                allowAdding={true}
                                allowDeleting={true}
                                useIcons={true}>

                                <Popup title={translate('Contact')} showTitle={true} width="90%" height="300px"/>
                              </Editing>

                              <Paging defaultPageSize={20} />
                              <Pager showPageSizeSelector={true} allowedPageSizes={[10, 20, 30, 40, 50, 100]} showInfo={true} />
                              <Sorting mode="multiple" />
                              <ColumnChooser enabled={true} />
                              <ColumnFixing enabled={true} />
                              <FilterRow visible={true} applyFilter="auto" />
                              <HeaderFilter visible={false} />
                              <SearchPanel visible={true} />
                              <GroupPanel visible={true} />

                              <Export enabled={true} allowExportSelectedData={true} fileName={translate('Contacts')} />

                              <Column
                                dataField="tipo"
                                caption={translate('Type')}
                                width={160}>
                                  <RequiredRule/>
                                  <Lookup dataSource={consts.typeContact}/>
                              </Column>

                              <Column
                                dataField="descricao"
                                caption={translate('Contact')}
                                dataType="string">
                                <RequiredRule/>
                                <StringLengthRule max={120} message={translate('ERROR_32')+" (120)"} />
                              </Column>

                              <Column
                                dataField="observacao"
                                caption={translate('Note')}
                                dataType="string">
                                <StringLengthRule max={100} message={translate('ERROR_32')+" (120)"} />
                              </Column>

                              <Summary>
                                <GroupItem
                                  column="descricao"
                                  summaryType="count"
                                  displayFormat={"{0}"}
                                  alignByColumn={true}
                                  showInGroupFooter={true}/>
                                <GroupItem
                                  column="descricao"
                                  summaryType="count"
                                  displayFormat={"{0}"}
                                  alignByColumn={true} />
                                <TotalItem
                                  column="descricao"
                                  summaryType="count"
                                  displayFormat={"{0}"}/>
                              </Summary>
                            </DataGrid>
                          </Tab>
                          <Tab title={translate('Documents')}>
                            <DataGrid
                              ref={this.gridDocumentsContainer}
                              id="gridDocumentsContainer"
                              dataSource={documents}
                              repaintChangesOnly={true}
                              allowColumnReordering={true}
                              allowColumnResizing={true}
                              showBorders={true}
                              onSaving={this.onSavingDocuments}
                              onEditingStart={this.onEditingStartDocuments}
                              onEditCanceled={this.onEditCanceledDocuments}
                              onToolbarPreparing={this.onToolbarPreparingDocument}
                              columnHidingEnabled={true}>

                              <Grouping autoExpandAll={this.state.expandedDocument} />
                              <Selection mode="multiple" />
                              <Editing
                                mode="popup"
                                allowUpdating={true}
                                allowAdding={true}
                                allowDeleting={false}
                                useIcons={true}>

                                <Popup title={translate('Document')} showTitle={true} width="90%" />

                                <Form labelLocation="top">
                                  <Item itemType="group" colCount={2} colSpan={2}>
                                    <Item dataField="ativo" />
                                    <Item dataField="principal" />
                                    <Item dataField="tipo" />
                                    <Item dataField="numero" />
                                    <Item dataField="expedido_em" />
                                    <Item dataField="expedidor" />
                                    <Item dataField="estado" />
                                    <Item dataField="nome" helpText={translate('INF_43')}/>
                                    <Item dataField="observacao" colSpan={2} />
                                    <Item dataField="imagens" itemType="group" colSpan={2} caption={translate('AttachDocument')}>
                                      <div id="dropzone-external" className={`flex-box ${isDropZoneActive ? 'dx-theme-accent-as-border-color dropzone-active' : 'dx-theme-border-color'}`}>
                                        <div className="d-flex justify-content-between">
                                          {this.renderImgs()}
                                        </div>
                                        {textVisible &&
                                        <div id="dropzone-text" className="flex-box">
                                          <span>{translate('INF_56')}</span>
                                          <span>{translate('ERROR_18')+' 1MB'}</span>
                                        </div>}
                                      </div>
                                        {textVisible ? null : <Button
                                                                  width={120}
                                                                  text={translate('Clean')}
                                                                  type="danger"
                                                                  stylingMode="outlined"
                                                                  onClick={this.clearImages}
                                                                />}
                                        {this.renderSavedImgs()}
                                      <FileUploader
                                        dialogTrigger="#dropzone-external"
                                        dropZone="#dropzone-external"
                                        multiple={true}
                                        chunkSize={200000}
                                        maxFileSize={1048576}
                                        visible={false}
                                        accept="image/png,image/jpg,image/jpeg"
                                        allowedFileExtensions={['.jpg', '.jpeg', '.png']}
                                        uploadMode='useButtons'
                                        onDropZoneEnter={this.onDropZoneEnter}
                                        onDropZoneLeave={this.onDropZoneLeave}
                                        onValueChanged={this.setImage} />
                                    </Item>
                                  </Item>
                                </Form>
                              </Editing>

                              <Paging defaultPageSize={20} />
                              <Pager showPageSizeSelector={true} allowedPageSizes={[10, 20, 30, 40, 50, 100]} showInfo={true} />
                              <Sorting mode="multiple" />
                              <ColumnChooser enabled={true} />
                              <ColumnFixing enabled={true} />
                              <FilterRow visible={true} applyFilter="auto" />
                              <HeaderFilter visible={false} />
                              <SearchPanel visible={true} />
                              <GroupPanel visible={true} />

                              <Export enabled={true} allowExportSelectedData={true} fileName={translate('Documents')} />

                              <Column
                                dataField="tipo"
                                caption={translate('Type')}
                                width={80}>
                                  <RequiredRule/>
                                  <Lookup dataSource={consts.typeDocument} displayExpr='name' valueExpr='id'/>
                              </Column>

                              <Column
                                dataField="numero"
                                caption={translate('DocumentNo')}
                                dataType="string">
                                <RequiredRule/>
                                <StringLengthRule max={20} message={translate('ERROR_32')+" (20)"} />
                              </Column>

                              <Column
                                dataField="expedido_em"
                                caption={translate('IssuedOn')}
                                dataType="date"
                                editorOptions={consts.opDate}
                                format='shortDate'
                                visible={false} >
                              </Column>

                              <Column
                                dataField="expedidor"
                                caption={translate('IssuingAgency')}
                                dataType="string"
                                visible={false} >
                                <RequiredRule/>
                                <StringLengthRule max={60} message={translate('ERROR_32')+" (60)"} />
                              </Column>

                              <Column
                                dataField="estado"
                                caption={translate('State')}
                                width={80}>
                                  <RequiredRule/>
                                  <Lookup dataSource={consts.sourceStates} displayExpr='name' valueExpr='id'/>
                              </Column>

                              <Column
                                dataField="nome"
                                caption={translate('DocumentName')}
                                dataType="string"
                                visible={false} >
                                <StringLengthRule max={60} message={translate('ERROR_32')+" (60)"} />
                              </Column>

                              <Column
                                dataField="observacao"
                                caption={translate('Note')}
                                dataType="string"
                                visible={false} >
                                <StringLengthRule max={150} message={translate('ERROR_32')+" (150)"} />
                              </Column>

                              <Column
                                dataField="principal"
                                caption={translate('Main')}
                                dataType="boolean"
                                cellRender={YesCell}
                                allowHeaderFiltering={false}
                                width={80}
                                falseText={translate('No')}
                                trueText={translate('Yes')}
                                alignment="center"
                              />

                              <Column
                                dataField="ativo"
                                caption={translate('Situation')}
                                dataType="boolean"
                                cellRender={ActiveCell}
                                allowHeaderFiltering={false}
                                width={80}
                                falseText={translate('Inactive')}
                                trueText={translate('Active')}
                                alignment="center"
                              />

                              <Column
                                dataField="criado_em"
                                caption={translate('CreatedAt')}
                                dataType="datetime"
                                editorOptions={consts.opDatetime}
                                format="shortDateShortTime"
                                visible={false}
                                width={140}
                              />

                              <Column
                                dataField="editado_em"
                                caption={translate('UpdatedAt')}
                                dataType="datetime"
                                editorOptions={consts.opDatetime}
                                format="shortDateShortTime"
                                visible={false}
                                width={140}
                              />

                              <Summary>
                                <GroupItem
                                  column="tipo"
                                  summaryType="count"
                                  displayFormat={"{0}"}
                                  alignByColumn={true}
                                  showInGroupFooter={true}/>
                                <GroupItem
                                  column="tipo"
                                  summaryType="count"
                                  displayFormat={"{0}"}
                                  alignByColumn={true} />
                                <TotalItem
                                  column="tipo"
                                  summaryType="count"
                                  displayFormat={"{0}"}/>
                              </Summary>
                            </DataGrid>
                          </Tab>
                        </TabbedItem>
                      </FormPopup>
                    </Editing>
                    <Paging defaultPageSize={20} />
                    <Pager showPageSizeSelector={true} allowedPageSizes={[10, 20, 30, 40, 50, 100]} showInfo={true} />
                    <Sorting mode="multiple" />
                    <ColumnChooser enabled={true} />
                    <ColumnFixing enabled={true} />
                    <FilterRow visible={true}   applyFilter="auto" />
                    <HeaderFilter visible={false} />
                    <SearchPanel visible={true} />
                    <GroupPanel visible={true} />

                    <Export enabled={true} allowExportSelectedData={true} fileName={document.title}/>

                    <Column
                      dataField="nome_padrao"
                      caption={translate('Nome')}
                      dataType="string"
                      allowHeaderFiltering={false}>
                      <RequiredRule/>
                    </Column>

                    <Column
                      dataField="tipo"
                      caption={translate('Person')}
                      width={100}>
                      <Lookup dataSource={consts.typePerson} displayExpr="name" valueExpr="id"/>
                      <RequiredRule/>
                    </Column>

                    <Column
                      dataField="cpf_cnpj"
                      caption={translate('CPFCNPJ')}
                      width={140}
                      alignment="center"
                      allowEditing={!editRowKey}>
                      <RequiredRule/>
                    </Column>

                    <Column
                      dataField="data_nasc"
                      caption={translate('DateOfBirth')}
                      dataType="date"
                      editorOptions={consts.opDate}
                      format='shortDate'
                      visible={false}
                      width={80}
                    />

                    <Column
                      dataField="idade"
                      caption={translate('Age')}
                      visible={false}
                      alignment="center"
                      width={80}
                    />

                    <Column
                      dataField="genero"
                      caption={translate('Genre')}
                      visible={false}
                      width={80}>
                      <Lookup dataSource={consts.typeGenre} displayExpr="name" valueExpr="id"/>
                    </Column>

                    <Column
                      dataField="estado_civil"
                      caption={translate('MaritalStatus')}
                      visible={false}
                      width={80}>
                      <Lookup dataSource={consts.maritalStatus} displayExpr="name" valueExpr="id" />
                    </Column>

                    <Column
                      dataField="ativo"
                      caption={translate('Situation')}
                      dataType="boolean"
                      cellRender={ActiveCell}
                      allowHeaderFiltering={false}
                      width={80}
                      falseText={translate('Inactive')}
                      trueText={translate('Active')}
                      alignment="center"
                    />

                    <Column
                      dataField="criado_em"
                      caption={translate('CreatedAt')}
                      dataType="datetime"
                      editorOptions={consts.opDatetime}
                      format="shortDateShortTime"
                      visible={false}
                      width={140}
                    />

                    <Column
                      dataField="editado_em"
                      caption={translate('UpdatedAt')}
                      dataType="datetime"
                      editorOptions={consts.opDatetime}
                      format="shortDateShortTime"
                      visible={false}
                      width={140}
                    />

                    <Summary>
                      <GroupItem
                        column="nome_padrao"
                        summaryType="count"
                        displayFormat={"{0}"}
                        alignByColumn={true}
                        showInGroupFooter={true}/>
                      <GroupItem
                        column="nome_padrao"
                        summaryType="count"
                        displayFormat={"{0}"}
                        alignByColumn={true} />
                      <TotalItem
                        column="nome_padrao"
                        summaryType="count"
                        displayFormat={"{0}"}/>
                    </Summary>
                  </DataGrid>

                </Tab>

                <Tab hint={translate('ModeTransport')} icon="fas fa-car">
                  <FormPopup colCount={4} colSpan={4} labelLocation="top" ref={null} formData={null}>
                    <SimpleItem dataField="tipo_transporte" editorType="dxLookup" allowEditing={false} editorOptions={{ dataSource: consts.typeTransport, onValueChanged: null, displayExpr: "name", valueExpr: "id", searchEnabled: true, showCancelButton: true, closeOnOutsideClick: true }}>
                      <Label text={translate('Type')} />
                    </SimpleItem>

                    <SimpleItem dataField="placa_transporte" >
                      <StringLengthRule max={8} message={translate('ERROR_32') + " (8)"} />
                      <Label text={translate('Plate')} />
                    </SimpleItem>

                    <SimpleItem dataField="modelo_transporte" >
                      <StringLengthRule max={20} message={translate('ERROR_32') + " (20)"} />
                      <Label text={translate('Model')} />
                    </SimpleItem>

                    <SimpleItem dataField="cor_transporte" editorType="dxLookup" allowEditing={false} editorOptions={{ dataSource: consts.colorsTransport, onValueChanged: null, displayExpr: "name", valueExpr: "id", searchEnabled: true, showCancelButton: true, closeOnOutsideClick: true }}>
                      <Label text={translate('PredominantColor')} />
                    </SimpleItem>
                  </FormPopup>

                  <DataGrid
                    id="gridContainer"
                    ref={this.dataGridTrasnportRef}
                    dataSource={transportes}
                    repaintChangesOnly={true}
                    //keyExpr="meio_trasnporte_id"
                    allowColumnReordering={true}
                    allowColumnResizing={true}
                    showBorders={true}
                    onSaving={null}
                    onEditingStart={null}
                    onToolbarPreparing={this.onToolbarPreparingTransport}
                    columnHidingEnabled={true}>
                    <Scrolling mode="infinite" />
                    <Paging enabled={true} pageSize={10} />
                    <Pager showPageSizeSelector={true} allowedPageSizes={[10, 20, 30, 40, 50, 100]} showInfo={true} />
                    <Sorting mode="multiple" />
                    <ColumnFixing enabled={true} />
                    <FilterRow visible={true} applyFilter="auto" />
                    <HeaderFilter visible={false} />
                    <GroupPanel visible={true} />
                    <Export enabled={true} allowExportSelectedData={true} fileName={document.title} />

                    <Editing
                      mode="popup"
                      allowUpdating={true}
                      allowDeleting={true}
                      useIcons={true}>
                      <Popup title={translate('Transporte')} showTitle={true} width="90%" height={300} />
                        <FormPopup colCount={4} colSpan={4} labelLocation="top" ref={null} formData={null}>
                          <SimpleItem dataField="tipo_transporte" editorType="dxLookup" allowEditing={false} editorOptions={{ dataSource: consts.typeTransport, onValueChanged: null, displayExpr: "name", valueExpr: "id", searchEnabled: true, showCancelButton: true, closeOnOutsideClick: true }}>
                            <Label text={translate('Type')} />
                          </SimpleItem>

                          <SimpleItem dataField="placa_transporte" >
                            <StringLengthRule max={8} message={translate('ERROR_32') + " (8)"} />
                            <Label text={translate('Plate')} />
                          </SimpleItem>

                          <SimpleItem dataField="modelo_transporte" >
                            <StringLengthRule max={20} message={translate('ERROR_32') + " (20)"} />
                            <Label text={translate('Model')} />
                          </SimpleItem>

                          <SimpleItem dataField="cor_transporte" editorType="dxLookup" allowEditing={false} editorOptions={{ dataSource: consts.colorsTransport, onValueChanged: null, displayExpr: "name", valueExpr: "id", searchEnabled: true, showCancelButton: true, closeOnOutsideClick: true }}>
                            <Label text={translate('PredominantColor')} />
                          </SimpleItem>
                        </FormPopup>
                    </Editing>


                    <Column
                      dataField="placa_transporte"
                      caption={translate('Plate')}
                      dataType="string"
                      width={120}
                    />

                    <Column
                      dataField="modelo_transporte"
                      caption={translate('Model')}
                      dataType="string"
                    />

                    <Column
                      dataField="tipo_transporte"
                      caption={translate('Type')} >
                      <Lookup dataSource={consts.typeTransport} valueExpr="id" displayExpr="name"
                      width={180}/>
                    </Column>

                    <Column
                      dataField="cor_transporte"
                      caption={translate('PredominatColor')}
                      width={140}>
                      <Lookup dataSource={consts.colorsTransport} valueExpr="id" displayExpr="name"/>
                    </Column>

                    <Summary>
                      <TotalItem
                        column="placa_transporte"
                        summaryType="count"
                        displayFormat={"{0}"}/>
                    </Summary>
                  </DataGrid>
                </Tab>

                <Tab hint={translate('CustomerHistory')} icon="fas fa-clipboard-check">
                  <DataGrid
                    id="gridHistorico"
                    ref={this.dataGridHistoricoRef}
                    dataSource={vendas}
                    repaintChangesOnly={true}
                    keyExpr="venda_id"
                    allowColumnReordering={true}
                    allowColumnResizing={true}
                    showBorders={true}
                    onInitNewRow={null}
                    onEditingStart={null}
                    onToolbarPreparing={null}>
                      <Editing
                        mode="popup"
                        allowUpdating={false}
                        allowAdding={false}
                        allowDeleting={false}
                        useIcons={true}>
                          <Popup title={translate('CustomerHistory')} showTitle={true} width="50%" height={250} />
                          <Form labelLocation="top">
                            <Item itemType="group" colCount={2} colSpan={2}>
                              <FormPopup labelLocation="top" colCount={2} colSpan={2} formData={frmSimulate}>
                                <SimpleItem dataField="categoria"
                                  visible={false}
                                  editorType="dxTextBox"
                                  editorOptions={{value: this.props.windows[0].categoria_id}}>
                                </SimpleItem>
                                <SimpleItem dataField="checkin"
                                  visible={false}
                                  editorType="dxTextBox"
                                  editorOptions={{value: frmChekin.checkin_em}}>
                                </SimpleItem>
                                <SimpleItem dataField="tabela_preco"
                                    editorType="dxLookup"
                                    editorOptions={{
                                    dataSource:tarifacoes,
                                    valueExpr:"tabela_preco_id",
                                    displayExpr:"descricao",
                                    searchEnabled:false,
                                    showClearButton: false,
                                    closeOnOutsideClick: true}}>
                                  <Label text={translate('PriceTable')}/>
                                  <RequiredRule/>
                                </SimpleItem>
                              </FormPopup>
                            </Item>
                          </Form>
                      </Editing>

                      <Scrolling mode="infinite" />
                      <Paging enabled={true} pageSize={10} />
                      <Pager showPageSizeSelector={true} allowedPageSizes={[10, 20, 30, 40, 50, 100]} showInfo={true} />
                      <Sorting mode="multiple" />

                      <Column type="buttons">
                        <Button name="edit" />
                        <Button icon="fa-search" visible={true}
                                onClick={(e) => {console.log('')}} />
                      </Column>

                      <Column
                        dataField="venda_id"
                        caption={translate('Bill')}
                        cellRender={this.comanda_customizeText}
                        alignment="left"
                      />
                      <Column
                        dataField="checkin_em"
                        caption={translate('Inflow')}
                        cellRender={this.entrada_customizeText}
                      />
                      <Column
                        dataField="checkout_em"
                        caption={translate('Outflow')}
                        cellRender={this.saida_customizeText}
                      />
                      <Column
                        dataField="valor_hospedagem"
                        caption={translate('Lodging')}
                        cellRender={this.valorSuite_customizeText}
                      />
                      <Column
                        dataField="valor_consumos"
                        caption={translate('Consumptions')}
                        cellRender={this.valorConsumos_customizeText}
                      />
                      <Column
                        dataField="valor_liquido"
                        caption={translate('Subtotal')}
                        cellRender={this.valorLiquido_customizeText}
                      />
                      <Column
                        dataField="valor_bruto"
                        caption={translate('Total')}
                        cellRender={this.valorBruto_customizeText}
                      />
                    </DataGrid>
                </Tab>
              </TabbedItem>
            </FormPopup>
          </ScrollView>
        </PopupForm>
      </React.Fragment>
    );
  }
}

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