import React, { Component } from 'react'
import $ from 'jquery'
import geomaton from 'geomaton'
import { connect } from 'react-redux'
import WindowChat from './components/status/WindowChat'
import WindowForm from './components/status/WindowForm'
import LoadingChat from './components/status/LoadingChat'
import WindowMsgChat from './components/status/WindowMsgChat'
import LogoutMsgChat from './components/status/LogoutMsgChat'
import SendMeChat from './components/status/SendMeChat'
import * as action from './actions'
import './App.css'
import './css/animate.css'
import './css/responsive.css'
import '../node_modules/material-design-icons/iconfont/material-icons.css'
import iconchat from "./img/Gif-Chat.gif";
import NotificationOnline from './components/modal/NotificationOnline'
import {
BrowserView,
MobileView,
isBrowser,
isMobile
} from "react-device-detect";
import lang from './lang'
import {Divider} from 'material-ui';
var googleMapsClient = require('@google/maps').createClient({
key: 'AIzaSyCs1BskB9l4pOOX2EC4gDiSfx5_hmEWC74'
})
class App extends Component {
constructor (props) {
super(props)
this.state = {
invitation: 'block',
showNotificationOnline: false,
invitationPicture: iconchat,
countryIso: ''
}
this.statusWindow = this.statusWindow.bind(this)
this.handleCloseNotification = this.handleCloseNotification.bind(this)
this.closeOfflineModal = this.closeOfflineModal.bind(this)
}
getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(window.location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}
getLocation() {
console.log('getLocation')
var $this = this
var startTime = ''
var sessionStart = window.sessionStorage.getItem('start')
var location = window.sessionStorage.getItem('location')
let sessionId = window.sessionStorage.getItem('sessionId')
if (sessionStart === null) {
startTime = Date.now()
window.sessionStorage.setItem('start', startTime)
} else {
startTime = window.sessionStorage.getItem('start')
}
if (location === null || location === 'null') {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
googleMapsClient.geocode({
address: `${position.coords.latitude},${position.coords.longitude}`
}, function(err, response) {
if (!err) {
var parsedResult2 = geomaton.parse(response.json)
parsedResult2.latitude = position.coords.latitude
parsedResult2.longitude = position.coords.longitude
parsedResult2.type = 'allow'
parsedResult2.time = startTime
let remote = JSON.parse($.ajax({
type: "GET",
url: `https://developer.latinoaustralia.com:6767/maxmind`,
async: false
}).responseText)
parsedResult2.ip = remote.ip
parsedResult2.iso_code = remote.data.country.iso_code
parsedResult2.url = window.location.href
window.sessionStorage.setItem('location', JSON.stringify(parsedResult2))
window.socket.emit('set-user-location', { room: sessionId, location: JSON.stringify(parsedResult2) })
$this.setState({ countryIso: remote.data.country.iso_code })
}
})
}, function (error){
$.get(`https://developer.latinoaustralia.com:6767/maxmind`).done(function( data ) {
googleMapsClient.geocode({
address: `${data.data.location.latitude},${data.data.location.longitude}`
}, function(err, response) {
if (!err) {
var parsedResult2 = geomaton.parse(response.json)
parsedResult2.latitude = data.data.location.latitude
parsedResult2.longitude = data.data.location.longitude
parsedResult2.type = 'deny'
parsedResult2.time = startTime
parsedResult2.ip = data.ip
parsedResult2.iso_code = data.country.iso_code
parsedResult2.url = window.location.href
window.sessionStorage.setItem('location', JSON.stringify(parsedResult2))
window.socket.emit('set-user-location', { room: sessionId, location: JSON.stringify(parsedResult2) })
$this.setState({ countryIso: data.country.iso_code })
}
})
})
})
} else {
console.log("Geolocation is not supported by this browser.")
}
} else {
let location = JSON.parse(window.sessionStorage.getItem('location'))
location.url = window.location.href
window.socket.emit('set-user-location', { room: sessionId, location: JSON.stringify(location) })
$this.setState({ countryIso: location.iso_code })
}
}
statusWindow (e) {
e.preventDefault()
this.setState({ invitation: 'none' })
let { modalChat } = this.props
if (modalChat === 'none') {
this.props.modal('block')
this.props.setBotonStatus('none')
} else {
this.props.modal('none')
this.props.setBotonStatus('block')
}
}
componentDidMount () {
let $this = this
let room = window.sessionStorage.getItem('room')
if (room != undefined && room != null) {
$this.props.login(2)
this.props.setBotonStatus('none')
} else {
this.props.setBotonStatus('block')
}
window.socket.on('counselor-invitation', function (data) {
let { modalChat } = $this.props
if (modalChat == 'none') {
$this.setState({ invitation: 'block', invitationPicture: `https://intranet.lae-edu.com/public/images/profiles/thumbnails_big/${data.user.id}.jpg` })
}
})
window.socket.on('counselor-not-available', function () {
$this.props.login(3)
})
window.socket.on('connect', function () {
$this.getLocation()
})
window.socket.on('client-close-chat', function () {
console.log('chat finalizado...')
})
window.socket.on('notification-counselor-online', function (data) {
let userOnline = data.counselor.userOnline
// console.log('userOnline', userOnline)
if (userOnline.length > 0) {
$this.props.setModalStatus('liveperson-background-online')
} else {
$this.props.setModalStatus('liveperson-background-offline')
}
})
$('.liveperson-offline-modal').addClass('animated bounceInRight').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
$(this).removeClass("animated bounceInRight").addClass('liveperson-offline-footer-pestana')
})
window.addEventListener('devicelight', function(event) {
var bodyBg= document.body.style;
//event.value is the lux value returned by the sensor on the device
if (event.value < 100) {
bodyBg.backgroundColor="#000";
} else {
bodyBg.backgroundColor="red";
}
})
// Validamos si viene set el autologin, luego hacemos el post para el login
let validation = this.getURLParameter('autologin')
if (validation) {
let userValidation = this.getURLParameter('user')
let location = window.sessionStorage.getItem('location')
this.props.modal('block')
this.props.setBotonStatus('none')
$.ajax({
type: 'POST',
url: `https://www.lae-edu.com/get-token-access`,
data: {
id : 'uS63FcbLqSxHiAlVQGNYtA==',
client : 'zLk60pgv0x5Bi+iQ17/9po3+XTpuWTuuzvNAKxdTl5RkiTKVKynG0wb0/fIdQKuW',
user : 'ubdfN0UsY2rtuLtFTU+3ffH8flO7GU7KhKuYJCg99Nw=',
pass : '9KGxGjiNX7twYuE7k7DInQ==',
}
})
.done(function(obj) {
window.sessionStorage.setItem('token_api', `${obj.access_token}`)
$.ajax({
type: 'GET',
url: `https://www.lae-edu.com/api/get-data-prospect/${userValidation}`,
})
.done(function(obj) {
let sessionId = window.sessionStorage.getItem('sessionId')
window.localStorage.setItem('user', JSON.stringify(obj.data))
// Look for a counselor
console.log('request-counselor')
window.socket.emit('request-counselor', { user: obj.data, location: location, sessionId: sessionId })
})
})
.fail(function(jqXhr) {
console.log('failed to get token', jqXhr)
})
// Look for a counselor
// window.socket.emit('request-counselor', { user: obj.live_person, location: location, sessionId: sessionId })
}
var vcOpen = document.getElementsByClassName("vc-open-chat")
for (var i = 0; i < vcOpen.length; i++) {
vcOpen[i].addEventListener('click', $this.statusWindow, false);
}
}
handleCloseNotification () {
this.props.setBotonStatus('none')
}
closeOfflineModal () {
this.props.offlineModalStatus('none')
}
render () {
// validamos el localstorage, para pedir registro
// let user = window.localStorage.getItem('user')
let { countryIso } = this.state
let { status, modalChat, botonStatus } = this.props
let NotificationComponent = this.state.showNotificationOnline ?
{ lang.modal_conectate }