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.addGuest = this.addGuest.bind(this);
    this.delGuest = this.delGuest.bind(this);
    this.onToolbarPreparing = this.onToolbarPreparing.bind(this);

    this.onSaving = this.onSaving.bind(this);
    this.onEditingStartGuest = this.onEditingStartGuest.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.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)
    };
  }

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

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

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

  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;

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

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

  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)} />

                <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}
                    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>
              </TabbedItem>
            </FormPopup>
          </ScrollView>
        </PopupForm>
      </React.Fragment>
    );
  }
}

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