\r\n {allowAllOptions && !singleSelect && options.length > 1 ?\r\n
: null\r\n }\r\n \r\n }>\r\n { if (!selectedAllOptions) { onChange(totalOptions) } else { onChange([]) } }}>\r\n
: null\r\n }\r\n {options.map((item) => {\r\n\r\n let isSelected = selectedData.includes(item[keyName]);\r\n let isDisabled = false;\r\n let isNew = false;\r\n\r\n if (disabledData) isDisabled = disabledData.findIndex(i => i === item[keyName]) >= 0;\r\n\r\n if (newData) isNew = newData.findIndex(i => i === item[keyName]) >= 0;\r\n\r\n return {labelAllServices}
\r\n \r\n {\r\n if (singleSelect) {\r\n // Selección única\r\n onChange(isSelected ? [] : [item[keyName]]);\r\n } else {\r\n // Selección múltiple\r\n if (isSelected) {\r\n onChange(selectedData.filter(value => value !== item[keyName]));\r\n } else {\r\n !isDisabled && onChange([...selectedData, item[keyName]]);\r\n }\r\n }\r\n }}>\r\n
\r\n })}\r\n \r\n
\r\n \r\n
\r\n {isSelected && }\r\n {language ? language[item[labelName]] : item[labelName]}
\r\n {isNew ? {`[${language['genius_multipleselect_label_new_graphs']}]`}
: null}\r\n\r\n
\r\n \r\n );\r\n};\r\nconst mapStateToProps = (state) => ({\r\n theme: state.theme.theme,\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n setTheme: (theme) => dispatch(themeActions.setTheme(theme)),\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MultipleSelect)","import React, { useState, useEffect } from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport { Animation, Drawer, Alert, Loader } from \"rsuite\";\r\n\r\nimport Input from \"./utilities/Input\";\r\n\r\nimport { SETData } from \"../../services/WebServices\";\r\nimport BackButton from \"./utilities/BackButton\";\r\nimport MultipleSelect from \"./utilities/MultipleSelect\";\r\n\r\nconst isValidateEmail = (email) => {\r\n return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email);\r\n};\r\n\r\nconst isValidUser = (user) => {\r\n if (user.name === null || user.name === \"\") {\r\n return false;\r\n }\r\n\r\n if (user.lastname === null || user.lastname === \"\") {\r\n return false;\r\n }\r\n\r\n if (!isValidateEmail(user.email)) {\r\n return false;\r\n }\r\n\r\n if (user.phone === null || user.phone === \"\") {\r\n return false;\r\n }\r\n\r\n if (user.address === null || user.address === \"\") {\r\n return false;\r\n }\r\n\r\n if (user.idService === null || user.idService === \"\") {\r\n return false;\r\n }\r\n\r\n if (user.ticketDescription === null || user.ticketDescription === \"\") {\r\n return false;\r\n }\r\n\r\n return true;\r\n};\r\n\r\nconst showError = (user, setFocus, setError, setShowPersonalData, language) => {\r\n if (user.name === null || user.name === \"\") {\r\n setFocus(1);\r\n setError(language.alert_user_popup_name);\r\n setShowPersonalData(true);\r\n return;\r\n }\r\n\r\n if (user.lastname === null || user.lastname === \"\") {\r\n setFocus(2);\r\n setError(language.alert_user_popup_lastname);\r\n setShowPersonalData(true);\r\n return;\r\n }\r\n\r\n if (!isValidateEmail(user.email)) {\r\n setFocus(3);\r\n setError(language.alert_user_popup_email);\r\n setShowPersonalData(true);\r\n return;\r\n }\r\n\r\n if (user.phone === null || user.phone === \"\") {\r\n setFocus(4);\r\n setError(language.alert_user_popup_phone);\r\n setShowPersonalData(true);\r\n return;\r\n }\r\n\r\n if (user.address === null || user.address === \"\") {\r\n setFocus(5);\r\n setError(language.alert_user_popup_address);\r\n setShowPersonalData(true);\r\n return;\r\n }\r\n\r\n if (user.idService === null || user.idService === \"\") {\r\n setFocus(9);\r\n setError(language.alert_support_popup_ticket_service);\r\n return;\r\n }\r\n\r\n if (user.ticketDescription === null || user.ticketDescription === \"\") {\r\n setFocus(8);\r\n setError(language.alert_support_popup_ticket_description);\r\n return;\r\n }\r\n\r\n return setFocus(0);\r\n};\r\n\r\nconst Support = (props) => {\r\n\r\n const initTicket = {\r\n idUser: props.user.idUser,\r\n idService: \"\",\r\n idDocument: props.user.idDocument,\r\n name: props.user.name,\r\n lastname: props.user.lastname,\r\n email: props.user.email,\r\n phone: props.user.phone,\r\n address: props.user.address,\r\n ticketDescription: \"\",\r\n file: \"\",\r\n };\r\n\r\n const [user, setUser] = useState(initTicket);\r\n const [isEnable, setEnable] = useState(false);\r\n const [personalData, setShowPersonalData] = useState(false);\r\n const [file, setFile] = useState(null);\r\n const [loading, setLoading] = useState(false);\r\n const [focus, setFocus] = useState(0);\r\n const [error, setError] = useState(\"\");\r\n const [authData, setAuthData] = useState(false);\r\n\r\n let language = props.language;\r\n\r\n const { theme } = props;\r\n\r\n const handleDragOver = (e) => {\r\n e.preventDefault();\r\n };\r\n\r\n const handleDrop = (e) => {\r\n e.preventDefault();\r\n const files = e.dataTransfer.files;\r\n if (files.length) {\r\n setFile(files[0]);\r\n }\r\n };\r\n\r\n const handleSubmit = async e => {\r\n e.preventDefault()\r\n if (isEnable && authData) {\r\n setLoading(true)\r\n\r\n const selectedService = props.totalServices.find(service => service.idService === parseInt(user.idService))\r\n const serviceType = selectedService.type.name\r\n let fileData = {}\r\n let errorFlag = false \r\n\r\n if (file !== null) {\r\n fileData = {\r\n fileName: `pqrs-files/Support-${Date.now()}-${file.name}`,\r\n bucket: \"neu-public\",\r\n contentType: file.type,\r\n }\r\n\r\n SETData(`web/support/upload`, \"POST\", fileData).then(response => {\r\n if (response.body) {\r\n const responseBody = JSON.parse(response.body)\r\n const signedUrl = responseBody.url\r\n\r\n fetch(signedUrl, {\r\n method: \"PUT\",\r\n headers: {\r\n \"Content-Type\": fileData.contentType,\r\n },\r\n body: file,\r\n }).then(response => {\r\n if (!response.ok) {\r\n console.error(\"Error en la carga de la imagen\", response)\r\n Alert.error(props.language.alert_submit_form_popup_failed, 6000)\r\n errorFlag = true\r\n }\r\n })\r\n } else {\r\n Alert.error(props.language.alert_submit_form_popup_failed, 6000)\r\n console.error(error)\r\n setLoading(false)\r\n errorFlag = true\r\n }\r\n })\r\n }\r\n\r\n if(errorFlag) return\r\n\r\n const dataZoho = {\r\n company: selectedService.name,\r\n clientType: \"Industrial o comercial\",\r\n name: user.name,\r\n lastname: user.lastname,\r\n phone: user.phone,\r\n email: user.email,\r\n ticketDescription: user.ticketDescription,\r\n channel: \"Platforms\",\r\n presignedUrl: file ? `https://neu-public.s3.sa-east-1.amazonaws.com/${fileData.fileName}` : null,\r\n type: serviceType === \"generation\" ? \"erco\" : \"neu\",\r\n }\r\n\r\n SETData(\"web/support/create\", \"POST\", dataZoho).then(response => {\r\n if (!response) {\r\n Alert.error(props.language.alert_submit_form_popup_failed, 6000)\r\n } else {\r\n const responseBody = JSON.parse(response.body)\r\n \r\n if (responseBody.message === \"Ticket created\") {\r\n props.setShowSupport(false)\r\n Alert.success(props.language.alert_support_popup_success, 7000)\r\n }\r\n }\r\n setLoading(false)\r\n setFile(null)\r\n setUser({ ...user, ticketDescription: \"\" })\r\n })\r\n } else {\r\n showError(user, setFocus, setError, setShowPersonalData, language)\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n setEnable(isValidUser(user));\r\n }, [setEnable, user]);\r\n\r\n useEffect(() => {\r\n if (props.totalServices.length === 1) {\r\n setUser((prevUser) => ({ ...prevUser, idService: props.totalServices[0].idService }));\r\n } else {\r\n setUser((prevUser) => ({ ...prevUser, idService: \"\" }));\r\n }\r\n }, [props.totalServices]);\r\n\r\n useEffect(() => {\r\n if (focus !== 0) { showError(user, setFocus, setError, setShowPersonalData, language) }\r\n }, [user, language, focus]);\r\n\r\n const optionsData = [{ name: props.language.support_select_placeholder, idService: \"\" }, ...props.totalServices]\r\n\r\n return (\r\n \r\n {label &&
\r\n {error ? {label}
}\r\n \r\n{error}
: null}\r\n\r\n
\r\n )\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n language: state.shared.language,\r\n neugets: state.accounts.neugets\r\n});\r\n\r\nexport default connect(mapStateToProps)(WalletCard);","import React, { useEffect } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as accountsActions from '../../store/actions/Accounts';\r\n\r\nimport { Drawer, Whisper, Tooltip } from 'rsuite';\r\n\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { faWhatsapp, faLinkedin, faFacebook } from '@fortawesome/free-brands-svg-icons';\r\nimport { faEnvelope } from '@fortawesome/pro-solid-svg-icons';\r\n\r\nimport filePDF from '../../files/TyC+PLAN+DE+REFERIDOS+.pdf';\r\n\r\nimport {\r\n LinkedinShareButton,\r\n WhatsappShareButton,\r\n EmailShareButton,\r\n FacebookShareButton\r\n} from \"react-share\";\r\n\r\nimport WalletCard from './WalletCard';\r\nimport BackButton from './utilities/BackButton';\r\n\r\nconst Neugets = (props) => {\r\n\r\n let codeReferred = props.codeReferred;\r\n let account = props.account;\r\n const getCodeReferredByAccountAsync = props.getCodeReferredByAccountAsync;\r\n\r\n useEffect(() => {\r\n if (account !== null)\r\n getCodeReferredByAccountAsync();\r\n }, [account, getCodeReferredByAccountAsync]);\r\n\r\n const codeMessage = props.language.neugets_text_share_code_message !== undefined && codeReferred ?\r\n props.language.neugets_text_share_code_message.replace(\"#code#\", codeReferred.codeReferred).split('\\\\n').join(' ') : null;\r\n\r\n return (\r\n \r\n
\r\n Tu balance
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n NEUgets
\r\n\r\n
\r\n \r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n language: state.shared.language,\r\n codeReferred: state.accounts.codeReferred,\r\n account: state.accounts.account\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n getCodeReferredByAccountAsync: () => dispatch(accountsActions.getCodeReferredByAccountAsync())\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Neugets);","import * as alerts from \"../creators/Alerts\";\r\nimport * as notifications from \"./Notifications\";\r\n\r\nimport { GETData, SETData } from \"../../services/WebServices\";\r\n\r\nimport { Alert } from 'rsuite';\r\n\r\nexport const setAlerts = payload => {\r\n return {\r\n type: alerts.SET_ALERTS,\r\n payload,\r\n };\r\n};\r\n\r\nexport const setAlertsLoading = payload => {\r\n return {\r\n type: alerts.SET_ALERTS_LOADING,\r\n payload,\r\n };\r\n};\r\n\r\nexport const setAlertRegisters = payload => {\r\n return {\r\n type: alerts.SET_ALERT_REGISTERS,\r\n payload,\r\n };\r\n};\r\n\r\nexport const setAlertRegistersPagination = payload => {\r\n return {\r\n type: alerts.SET_ALERT_REGISTERS_PAGINATION,\r\n payload,\r\n };\r\n};\r\n\r\nexport const setShowDrawerAlerts = payload => {\r\n return {\r\n type: alerts.SET_SHOW_DRAWER_ALERTS,\r\n payload,\r\n };\r\n};\r\n\r\nexport const setGraphsAlerts = payload => {\r\n return {\r\n type: alerts.SET_GRAPHS_ALERTS,\r\n payload\r\n }\r\n};\r\n\r\nexport const loadAlertsAsync = () => {\r\n return (dispatch, getState) => {\r\n\r\n dispatch(setAlertsLoading(true));\r\n\r\n const userId = getState().users.user.idUser;\r\n\r\n GETData(`alerts/${userId}?page_limit=20`, \"GET\")\r\n .then(response => {\r\n if (response !== null) {\r\n dispatch(setAlerts(response.data));\r\n } else {\r\n dispatch(setAlerts([]));\r\n }\r\n })\r\n .catch(response => console.error(response))\r\n .finally(() => dispatch(setAlertsLoading(false)));\r\n };\r\n\r\n};\r\n\r\n\r\nexport const createAlertAsync = (payload) => {\r\n return (dispatch, getState) => {\r\n\r\n const userId = getState().users.user.idUser;\r\n const language = getState().shared.language;\r\n let fromHour = payload?.intervalTime?.fromHour;\r\n let toHour = payload?.intervalTime?.toHour;\r\n fromHour = payload?.intervalTime?.fromPartOfDay === 'pm' ? String(parseInt(fromHour) + 12) : fromHour;\r\n toHour = payload?.intervalTime?.toPartOfDay === 'pm' ? String(parseInt(toHour) + 12) : toHour;\r\n\r\n const parameters = {\r\n id_graph: payload?.graphIds[0],\r\n id_alert_type: payload?.condition[0],\r\n value: payload?.value,\r\n id_user: userId,\r\n alert_name: payload?.name,\r\n id_frequency: payload?.intervalTime?.intervalIds[0],\r\n start_hour: fromHour + \":\" + payload?.intervalTime?.fromMinutes + \":00\",\r\n end_hour: toHour + \":\" + payload?.intervalTime?.toMinutes + \":00\",\r\n active_week_days: payload?.intervalTime?.dayIds,\r\n id_channels: payload?.channelIds,\r\n id_services: payload?.serviceIds,\r\n timing_plus: payload?.intervalTime?.timingPlus,\r\n }\r\n\r\n SETData(`alerts`, \"POST\", parameters)\r\n .then((response) => {\r\n if (response !== null) {\r\n Alert.success(language.alerts_messager_alert_create_success, 8000);\r\n } else\r\n Alert.error(language.alerts_messager_alert_create_error, 8000);\r\n })\r\n .catch(response => console.error(response))\r\n .finally(() => dispatch(loadAlertsAsync()));\r\n\r\n }\r\n}\r\n\r\n\r\nexport const editAlertAsync = (payload) => {\r\n return (dispatch, getState) => {\r\n\r\n const language = getState().shared.language;\r\n let fromHour = payload?.intervalTime?.fromHour;\r\n let toHour = payload?.intervalTime?.toHour;\r\n fromHour = payload?.intervalTime?.fromPartOfDay === 'pm' ? String(parseInt(fromHour) + 12) : fromHour;\r\n toHour = payload?.intervalTime?.toPartOfDay === 'pm' ? String(parseInt(toHour) + 12) : toHour;\r\n\r\n const parameters = {\r\n id_graph: payload?.graphIds[0],\r\n id_alert_type: payload?.condition[0],\r\n value: payload?.value,\r\n alert_name: payload?.name,\r\n id_frequency: payload?.intervalTime?.intervalIds[0],\r\n start_hour: fromHour + \":\" + payload?.intervalTime?.fromMinutes + \":00\",\r\n end_hour: toHour + \":\" + payload?.intervalTime?.toMinutes + \":00\",\r\n active_week_days: payload?.intervalTime?.dayIds,\r\n id_channels: payload?.channelIds,\r\n id_services: payload?.serviceIds\r\n }\r\n\r\n SETData(`alerts/${payload?.idAlert}`, \"PATCH\", parameters)\r\n .then((response) => {\r\n if (response !== null) {\r\n Alert.success(language.alerts_messager_alert_edit_success, 6000);\r\n } else\r\n Alert.error(language.alerts_messager_alert_edit_error, 8000);\r\n })\r\n .catch(response => console.error(response))\r\n .finally(() => dispatch(loadAlertsAsync()));\r\n\r\n }\r\n}\r\n\r\nexport const deleteAlertAsync = (id) => {\r\n return (dispatch, getState) => {\r\n const language = getState().shared.language;\r\n GETData(`alerts/${id}`, \"DELETE\")\r\n .then((_response) => {\r\n Alert.success(language.alerts_messager_alert_delete_success, 6000);\r\n })\r\n .catch(response => console.error(response))\r\n .finally(() => dispatch(loadAlertsAsync()));;\r\n };\r\n\r\n};\r\n\r\nexport const loadAlertRegistersAsync = () => {\r\n return (dispatch, getState) => {\r\n\r\n dispatch(notifications.setNotificationsLoading(true));\r\n\r\n const alerts = getState().alerts.alertRegisters;\r\n const page = getState().alerts.alertRegistersPagination || 1;\r\n\r\n const userId = getState().users.user.idUser;\r\n\r\n GETData(`notifications/${userId}?page=${page}&page_limit=10&all_registers=${false}`, \"GET\")\r\n .then(response => {\r\n if (response !== null) {\r\n dispatch(setAlertRegistersPagination(response.pagination_info.next_page));\r\n dispatch(setAlertRegisters([...alerts, ...response.data]));\r\n }\r\n })\r\n .catch(response => console.error(response))\r\n .finally(() => dispatch(notifications.setNotificationsLoading(false)));\r\n };\r\n\r\n};\r\n\r\nexport const loadGraphOptionsAsync = () => {\r\n return (dispatch, getState) => {\r\n\r\n const language = getState().shared.language;\r\n\r\n const groups = [\"CONSUMPTION\",\"GENERATION\"]\r\n\r\n const metadata = {\r\n groups\r\n };\r\n\r\n SETData(`energy/graphs/group/${language.language_locale}`, \"POST\", metadata)\r\n .then((response) => {\r\n if (response !== null) {\r\n /* To translate the key 'group' for the search input in GraphTypePicker ⬇️ */\r\n const translatedGraphs = response.graphsGroups.map((graph) => {\r\n const translationKey = `energy_graph_group_${graph.group.toLowerCase()}`\r\n const translatedGroup = language[translationKey]\r\n\r\n return {\r\n ...graph,\r\n translatedGroup: translatedGroup,\r\n }\r\n })\r\n const graphResponse = response\r\n graphResponse[\"graphsGroups\"] = translatedGraphs\r\n dispatch(setGraphsAlerts(graphResponse))\r\n }\r\n })\r\n .catch((response) => console.error(response))\r\n\r\n }\r\n}\r\n","import React, { useState } from \"react\";\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as sharedActions from '../../store/actions/Shared';\r\nimport * as notificationsActions from '../../store/actions/Notifications';\r\n\r\nimport { Popover } from \"@idui/react-popover\";\r\n\r\nimport { track } from \"@amplitude/analytics-browser\";\r\n\r\nconst PopoverNotifications = (props) => { \r\n\r\n let notification = props.notification;\r\n let theme = props.theme\r\n\r\n const [focus, setFocus] = useState(false); \r\n const [show, setShow] = useState(false); \r\n\r\n const handlerClose = (state) => {\r\n setShow(state);\r\n props.setShowBlackScreenDrawer(state);\r\n setFocus(state); \r\n show && track('Notification opened', {Notification_ID: notification?.category})\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n props.setShowNeugets(false)}> \r\n
\r\n {props.language.neugets_drawer_main_title}
\r\n{props.language.neugets_drawer_text_neugets_description}
\r\n\r\n
\r\n {props.language.neugets_drawer_text_use_neugets}
\r\n{props.language.neugets_drawer_text_get_neugets}
\r\n\r\n
\r\n {props.language.neugets_drawer_text_share_referral_code}
\r\n {codeReferred &&\r\n\r\n {props.language.neugets_tooltip_copy_code}}>\r\n navigator.clipboard.writeText(codeReferred.codeReferral)}>\r\n \r\n
}\r\n \r\n {codeReferred.codeReferral}
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n }>\r\n {\r\n handlerClose(false);\r\n props.updateNotificationAsync({\r\n id: notification.id,\r\n read: !notification.read\r\n })\r\n }}>\r\n
\r\n \r\n \r\n
\r\n {notification.read ? props.language.notifications_notification_set_unread : props.language.notifications_notification_set_read}
\r\n {\r\n handlerClose(false);\r\n props.setVisualization(false);\r\n props.deleteNotificationAsync(notification.id)\r\n }}>\r\n
\r\n \r\n \r\n
\r\n {props.language.notifications_notification_delete}
\r\n\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({ \r\n language: state.shared.language,\r\n notification: ownProps.notification,\r\n setVisualization: ownProps.setVisualization,\r\n theme: state.theme.theme,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({ \r\n setShowBlackScreenDrawer: (payload) => dispatch(sharedActions.setShowBlackScreenDrawer(payload)),\r\n deleteNotificationAsync: (payload) => dispatch(notificationsActions.deleteNotificationAsync(payload)),\r\n updateNotificationAsync: (payload) => dispatch(notificationsActions.updateNotificationAsync(payload))\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(PopoverNotifications);","import React, { useState, useRef } from \"react\";\r\n\r\nimport { replaceTextValues } from \"../../services/NotificationsHandler\";\r\n\r\nimport moment from \"moment\";\r\n\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { fal } from '@fortawesome/pro-light-svg-icons';\r\n\r\nimport { slideOutRight } from 'react-animations';\r\n\r\nimport Radium, { StyleRoot } from 'radium';\r\n\r\nimport PopoverNotifications from \"./PopoverNotifications\";\r\n\r\nimport { track } from \"@amplitude/analytics-browser\";\r\n\r\nconst styles = {\r\n slideOutRight: {\r\n animation: 'x 0.25s',\r\n animationName: Radium.keyframes(slideOutRight, 'slideOutRight')\r\n }\r\n}\r\n\r\nconst NotificationBox = (props) => {\r\n\r\n const { id_register, title, body, values, icon, color, timestamp, read, deeplink } = props.notification;\r\n const { theme } = props;\r\n\r\n const [isShown, setVisualization] = useState(true);\r\n const [category, setCategory] = useState('');\r\n \r\n const hasHovered = useRef(false);\r\n\r\n const colorThemeMap = {\r\n \"#cefc34\": { dark: \"#9ecc14\", light: \"#7da60c\" },\r\n \"#ffaa00\": { dark: \"#f97316\", light: \"#ea580c\" },\r\n \"#00b7d3\": { dark: \"#00b7d3\", light: \"#0396b7\" },\r\n };\r\n\r\n const getThemeColor = (color, theme) => {\r\n return colorThemeMap[color]?.[theme] || color;\r\n };\r\n\r\n const handleHover = () => {\r\n if (!hasHovered.current) { \r\n hasHovered.current = true; \r\n\r\n switch (icon) {\r\n case 'faCircleInfo':\r\n setCategory('information')\r\n break\r\n case 'faTriangleExclamation':\r\n setCategory('warning')\r\n break\r\n case 'faSquareExclamation':\r\n setCategory('alert')\r\n break\r\n case 'faShieldCheck':\r\n setCategory('success')\r\n break\r\n default:\r\n break\r\n }\r\n\r\n track('Notification hover', { Notification_ID: category });\r\n }\r\n };\r\n\r\n const handleLeave = () => { \r\n hasHovered.current = false;\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n\r\n );\r\n};\r\n\r\nexport default NotificationBox;\r\n","import React, {Fragment} from \"react\";\r\n\r\nexport const replaceTextValues = (text, values) => {\r\n \r\n for (let key in values) {\r\n let value = values[key.toLowerCase()];\r\n text = text.replace(\"{{\" + key.toLowerCase() + \"}}\", value);\r\n }\r\n text = text.split('\\n');\r\n\r\n return \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {title}
\r\n{replaceTextValues(body, values)}
\r\n\r\n
\r\n {moment(timestamp).fromNow()}
\r\n \r\n \r\nERCO Energía
\r\n\r\n
\r\n \r\n {options?.length && options.map((item, index) => { \r\n let isSelected = selectedData.includes(item[keyName]); \r\n return
\r\n \r\n};\r\n\r\nexport default CheckPicker;","import React, { useState, useEffect } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport { Drawer } from 'rsuite';\r\n\r\nimport _ from 'lodash';\r\n\r\nimport CheckPicker from '../shared/utilities/CheckPicker';\r\nimport BackButton from '../shared/utilities/BackButton';\r\n\r\nconst days = language => [\r\n {\r\n id_day: 1,\r\n label: language.alerts_select_days_monday\r\n },\r\n {\r\n id_day: 2,\r\n label: language.alerts_select_days_tuesday\r\n },\r\n {\r\n id_day: 3,\r\n label: language.alerts_select_days_wednesday\r\n },\r\n {\r\n id_day: 4,\r\n label: language.alerts_select_days_thursday\r\n },\r\n {\r\n id_day: 5,\r\n label: language.alerts_select_days_friday\r\n },\r\n {\r\n id_day: 6,\r\n label: language.alerts_select_days_saturday\r\n },\r\n {\r\n id_day: 7,\r\n label: language.alerts_select_days_sunday\r\n },\r\n];\r\n\r\nconst checkTimePlus = language => [\r\n {\r\n minutes: 1,\r\n label: language.alerts_select_check_one_minute\r\n },\r\n {\r\n minutes: 5,\r\n label: language.alerts_select_check_five_minute\r\n },\r\n {\r\n minutes: 10,\r\n label: language.alerts_select_check_ten_minute\r\n },\r\n {\r\n minutes: 15,\r\n label: language.alerts_select_check_fifteen_minute\r\n },\r\n];\r\n\r\nconst intervals = language => [\r\n {\r\n id_interval: 4,\r\n label: language.alerts_select_interval_secondBySecond,\r\n plus: true\r\n },\r\n {\r\n id_interval: 0,\r\n label: language.alerts_select_interval_hourly\r\n },\r\n {\r\n id_interval: 1,\r\n label: language.alerts_select_interval_daily\r\n },\r\n {\r\n id_interval: 2,\r\n label: language.alerts_select_interval_weekly\r\n },\r\n {\r\n id_interval: 3,\r\n label: language.alerts_select_interval_monthly\r\n }\r\n];\r\n\r\nconst IntervalTime = (props) => {\r\n\r\n const initAlertTime = {\r\n dayIds: [],\r\n fromHour: \"00\",\r\n fromMinutes: \"00\",\r\n fromPartOfDay: 'am',\r\n toHour: \"11\",\r\n toMinutes: \"59\",\r\n toPartOfDay: 'pm',\r\n intervalIds: [],\r\n dates: [],\r\n timingPlus: -1,\r\n }\r\n\r\n const [alertTime, setAlertTime] = useState(initAlertTime);\r\n const [showTimePlus, setShowTimePlus] = useState(false);\r\n\r\n const theme = props.theme\r\n\r\n useEffect(() => {\r\n if (props.intervalTime) setAlertTime(props.intervalTime);\r\n }, [props.intervalTime])\r\n\r\n useEffect(() => {\r\n if (alertTime.intervalIds.length) {\r\n if (alertTime.intervalIds[0] === 4) {\r\n setShowTimePlus(true)\r\n }\r\n else {\r\n setShowTimePlus(false)\r\n };\r\n }\r\n }, [alertTime])\r\n\r\n const format = (value, hour) => {\r\n value = parseInt(value, 10);\r\n value = value < 0 && hour ? 0 : value > 12 && hour ? 12 : value;\r\n value = value < 0 && !hour ? 0 : value > 59 && !hour ? 59 : value;\r\n value = value < 10 ? '0' + String(value) : String(value);\r\n return value;\r\n }\r\n\r\n const RenderDays = ({ options, labelName, selectedData, keyName, onChange }) => {\r\n return (\r\n { \r\n if(isSelected){\r\n onChange(selectedData.filter(value => value !== item[keyName])); \r\n }else{ \r\n if (plusSelected || (!plusSelected && !('plus' in item || 'id_device' in item))) onChange([...selectedData, item[keyName]]); \r\n }\r\n }}\r\n >\r\n
\r\n })} \r\n \r\n {'plus' in item || 'id_device' in item ? \r\n
\r\n \r\n {item[labelName]}\r\n
:\r\n \r\n
\r\n Plus
\r\n{item[labelName]}
} \r\n \r\n \r\n {options.length && options.map((item, index) => {\r\n let isSelected = selectedData.includes(item[keyName]);\r\n return \r\n })}\r\n
\r\n )\r\n }\r\n\r\n const RenderTiming = ({ options, labelName, selectedData, keyName, onChange }) => {\r\n return (\r\n \r\n {options.length && options.map((item, index) => {\r\n let isSelected = selectedData === item[keyName];\r\n return \r\n })}\r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n language: state.shared.language,\r\n theme: state.theme.theme,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(IntervalTime);","import React, { useState, useEffect } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport { Drawer, Animation } from 'rsuite';\r\n\r\nimport IntervalTime from './IntervalTime';\r\nimport Input from '../shared/utilities/Input';\r\nimport CheckPicker from '../shared/utilities/CheckPicker';\r\n\r\nimport * as alertsActions from '../../store/actions/Alerts';\r\nimport * as sharedActions from '../../store/actions/Shared';\r\n\r\nimport _ from 'lodash';\r\nimport { track } from \"@amplitude/analytics-browser\";\r\nimport BackButton from '../shared/utilities/BackButton';\r\n\r\nconst conditions = language => [\r\n {\r\n id_condition: 0,\r\n label: language.alerts_condition_greater_than\r\n },\r\n {\r\n id_condition: 2,\r\n label: language.alerts_condition_same_as\r\n },\r\n {\r\n id_condition: 1,\r\n label: language.alerts_condition_less_than\r\n },\r\n];\r\n\r\nconst channels = language => [\r\n {\r\n id_channel: 1,\r\n label: language.alerts_channel_email,\r\n eventProperty: 'Mail_Alert'\r\n },\r\n {\r\n id_channel: 3,\r\n label: language.alerts_channel_text_message,\r\n eventProperty: 'Msm_Alert'\r\n },\r\n {\r\n id_channel: 2,\r\n label: language.alerts_channel_notification,\r\n eventProperty: 'Notification_Alert'\r\n },\r\n];\r\n\r\nconst days = language => [\r\n {\r\n id_day: 1,\r\n label: language.alerts_select_days_monday,\r\n eventProperty: 'Monday_Interval'\r\n },\r\n {\r\n id_day: 2,\r\n label: language.alerts_select_days_tuesday,\r\n eventProperty: 'Tuesday_Interval'\r\n },\r\n {\r\n id_day: 3,\r\n label: language.alerts_select_days_wednesday,\r\n eventProperty: 'Wednesday_Interval'\r\n },\r\n {\r\n id_day: 4,\r\n label: language.alerts_select_days_thursday,\r\n eventProperty: 'Thursday_Interval'\r\n },\r\n {\r\n id_day: 5,\r\n label: language.alerts_select_days_friday,\r\n eventProperty: 'Friday_Interval'\r\n },\r\n {\r\n id_day: 6,\r\n label: language.alerts_select_days_saturday,\r\n eventProperty: 'Saturday_Interval'\r\n },\r\n {\r\n id_day: 7,\r\n label: language.alerts_select_days_sunday,\r\n eventProperty: 'Sunday_Interval'\r\n },\r\n];\r\n\r\nconst intervals = language => [\r\n {\r\n id_interval: 4,\r\n label: language.alerts_select_interval_secondBySecond,\r\n eventProperty: 'SecondBySecond_Interval'\r\n },\r\n {\r\n id_interval: 0,\r\n label: language.alerts_select_interval_hourly,\r\n eventProperty: 'Hourly_Interval'\r\n },\r\n {\r\n id_interval: 1,\r\n label: language.alerts_select_interval_daily,\r\n eventProperty: 'Daily_Interval'\r\n },\r\n {\r\n id_interval: 2,\r\n label: language.alerts_select_interval_weekly,\r\n eventProperty: 'Weekly_Interval'\r\n },\r\n {\r\n id_interval: 3,\r\n label: language.alerts_select_interval_monthly,\r\n eventProperty: 'Monthly_Interval'\r\n }\r\n];\r\n\r\nconst combinedArray = (array1, array2) => {\r\n const newArray = array1.map(item1 => {\r\n const match = array2.find(item2 => \r\n item2.id_service === item1?.idService && item2?.id_infrastructure === 2\r\n );\r\n if (match) {\r\n return {\r\n ...item1,\r\n id_device: match?.id_device\r\n };\r\n }\r\n return item1;\r\n });\r\n return newArray;\r\n};\r\n\r\nconst Alerts = (props) => {\r\n\r\n const initAlert = {\r\n idAlert: null,\r\n name: null,\r\n serviceIds: [],\r\n graphIds: [],\r\n condition: [],\r\n value: null,\r\n channelIds: [],\r\n intervalTime: null,\r\n }\r\n\r\n const [alert, setAlert] = useState(initAlert);\r\n const [activeService, setActiveService] = useState(false);\r\n const [activeVariable, setActiveVariable] = useState(false);\r\n const [activeRule, setActiveRule] = useState(false);\r\n const [activeValue, setActiveValue] = useState(false);\r\n const [activeChannel, setActiveChannel] = useState(false);\r\n const [showAlertPeriod, setShowPeriodAlert] = useState(false);\r\n const [alertProperty, setAlertProperty] = useState({ Variable_ID: '', Alert_Type: '', Project_Quantity: 0, Interval_ID: '', Interval_Day: '' })\r\n const [searchTerm, setSearchTerm] = useState('');\r\n\r\n let showNewAlert = props.showNewAlert;\r\n let newAlert = props.newAlert;\r\n let graphs = props.graphs;\r\n let language = props.language;\r\n let theme = props.theme;\r\n\r\n const setControlledOnboarding = props.setControlledOnboarding;\r\n\r\n useEffect(() => {\r\n if (showNewAlert && newAlert) {\r\n setControlledOnboarding({ key: 'new_alert', value: true })\r\n } else {\r\n setControlledOnboarding({ key: 'new_alert', value: false })\r\n }\r\n }, [showNewAlert, setControlledOnboarding, newAlert])\r\n\r\n useEffect(() => {\r\n if (props.alertSelected) {\r\n\r\n const fromHour = parseInt(props.alertSelected?.start_hour?.split(':')[0]);\r\n const fromHourFormated = fromHour > 12 ? fromHour - 12 : fromHour;\r\n const toHour = parseInt(props.alertSelected?.end_hour?.split(':')[0]);\r\n const toHourFormated = toHour > 12 ? toHour - 12 : toHour;\r\n\r\n const alertTime = {\r\n dayIds: props.alertSelected?.active_week_days,\r\n fromHour: fromHourFormated < 10 ? '0' + String(fromHourFormated) : String(fromHourFormated),\r\n fromMinutes: props.alertSelected?.start_hour?.split(':')[1],\r\n fromPartOfDay: fromHour > 12 ? 'pm' : 'am',\r\n toHour: toHourFormated < 10 ? '0' + String(toHourFormated) : String(toHourFormated),\r\n toMinutes: props.alertSelected?.end_hour?.split(':')[1],\r\n toPartOfDay: toHour > 12 ? 'pm' : 'am',\r\n intervalIds: [props.alertSelected?.id_frequency],\r\n dates: []\r\n }\r\n\r\n setAlert({\r\n ...alert, idAlert: props.alertSelected?.id_alert,\r\n name: props.alertSelected?.alert_name,\r\n serviceIds: props.alertSelected?.services?.map(item => item?.id),\r\n graphIds: [props.alertSelected?.id_graph],\r\n condition: [props.alertSelected?.id_alert_type],\r\n value: props.alertSelected?.value,\r\n channelIds: props.alertSelected?.channels.map(item => item?.id),\r\n intervalTime: alertTime\r\n })\r\n }\r\n // eslint-disable-next-line\r\n }, [props.alertSelected]);\r\n\r\n\r\n const formatLabel = (array1, array2, keyName, labelName) => {\r\n\r\n let array3 = array1.map(x => array2.filter(y => y[keyName] === x))\r\n .flat()\r\n\r\n return array3.map((s, index) => {\r\n if (index === array3.length - 1) {\r\n return `${s[labelName]}. `;\r\n } else {\r\n return `${s[labelName]}, `;\r\n }\r\n\r\n }).join(\"\");\r\n }\r\n\r\n const formatAmplitudeEvent = (array1, array2, keyName, labelName) => {\r\n\r\n let array3 = array1.map(x => array2.filter(y => y[keyName] === x))\r\n .flat()\r\n\r\n return array3.map((s, index) => {\r\n return s[labelName]\r\n });\r\n }\r\n\r\n const validateSecondBySecond = () => {\r\n const servicesPlus = combinedArray(props.totalServices, props.devices)?.filter(item => 'id_device' in item);\r\n const servicesSelectedPlus = servicesPlus?.filter(item => alert?.serviceIds?.includes(item?.idService));\r\n const idsGraphsPlus = [29,30,7,8];\r\n return servicesSelectedPlus.length && idsGraphsPlus?.filter(item => alert?.graphIds?.includes(item))?.length\r\n }\r\n\r\n const validatePlus = graphs => {\r\n const servicesPlus = combinedArray(props.totalServices, props.devices)?.filter(item => 'id_device' in item);\r\n const servicesSelectedPlus = servicesPlus?.filter(item => alert?.serviceIds?.includes(item?.idService))\r\n const idsGraphsPlus = [29,30,7,8];\r\n if (servicesSelectedPlus.length){\r\n let plusGraphs = graphs?.filter(item => idsGraphsPlus?.includes(item?.id_graph));\r\n plusGraphs = plusGraphs?.map(item => { return {...item, plus: true}});\r\n const energyGraphs = graphs?.filter(item => item?.id_graph <= 8);\r\n return [...plusGraphs, ...energyGraphs]\r\n }\r\n else{\r\n return graphs\r\n }\r\n }\r\n\r\n const translatedGraphs = props.graphs && props.graphs.options.map((_graph) => {\r\n const labelTranslation = props.language[`energy_graph_label_${_graph.value.toLowerCase()}`]\r\n\r\n return {\r\n ..._graph,\r\n labelTranslation: labelTranslation,\r\n }\r\n })\r\n\r\n const formatGraphLabel = () => {\r\n if (!translatedGraphs) return\r\n\r\n const graphSelected = translatedGraphs.filter((graph) => graph.id_graph === alert.graphIds[0])\r\n return graphSelected[0]?.labelTranslation\r\n }\r\n\r\n useEffect(() => {\r\n if (alert.serviceIds.length) { setAlertProperty(prevState => ({ ...prevState, Project_Quantity: alert.serviceIds.length })) }\r\n if (alert.graphIds.length) { setAlertProperty(prevState => ({ ...prevState, Variable_ID: graphs.options.filter(g => g.id_graph === alert.graphIds[0])[0]?.value })) }\r\n if (alert.channelIds.length) { setAlertProperty(prevState => ({ ...prevState, Alert_Type: formatAmplitudeEvent(alert.channelIds, channels(language), 'id_channel', 'eventProperty') })) }\r\n if (alert.intervalTime?.intervalIds.length) { setAlertProperty(prevState => ({ ...prevState, Interval_ID: formatAmplitudeEvent(alert.intervalTime.intervalIds, intervals(language), 'id_interval', 'eventProperty') })) }\r\n if (alert.intervalTime?.dayIds.length) { setAlertProperty(prevState => ({ ...prevState, Interval_Day: formatAmplitudeEvent(alert.intervalTime.dayIds, days(language), 'id_day', 'eventProperty') })) }\r\n }, [alert, setAlertProperty, graphs, language])\r\n\r\n\r\n const handleClose = () => {\r\n props.setShowNewAlert(false)\r\n props.setAlertSelected(null)\r\n props.setEditAlert(false)\r\n setAlert(initAlert)\r\n }\r\n\r\n const filteredServices = combinedArray(\r\n props.totalServices.filter(service =>\r\n service.name.toLowerCase().includes(searchTerm.toLowerCase())\r\n ),\r\n props.devices\r\n );\r\n\r\n const groupedServices = _.groupBy(filteredServices, (service) => service.account?.idAccount || 'Sin cuenta');\r\n\r\n const toggleSelectAllServicesByAccount = (services) => {\r\n const accountServiceIds = services.map(service => service.idService);\r\n const areAllSelected = accountServiceIds.every(id => alert.serviceIds.includes(id));\r\n\r\n setAlert({\r\n ...alert,\r\n serviceIds: areAllSelected\r\n ? alert.serviceIds.filter(id => !accountServiceIds.includes(id)) \r\n : [...alert.serviceIds, ...accountServiceIds], \r\n });\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n props.setShowPeriodAlert(false)}> \r\n
\r\n \r\n
\r\n {props.language.alerts_title_interval_time}
\r\n{props.language.alerts_interval_time_body_frequency}
\r\n\r\n { setAlertTime({ ...alertTime, intervalIds: [_.last(value)] }) }}\r\n plusSelected={props.plusSelected}\r\n theme={theme}\r\n backgroundColor='surface-bg-on-surface-alpha'\r\n border={true}\r\n />\r\n
\r\n {showTimePlus ?\r\n \r\n { setAlertTime({ ...alertTime, timingPlus: value }) }}\r\n />\r\n
: null}\r\n {props.language.alerts_interval_time_title_plus_check}
\r\n\r\n { setAlertTime({ ...alertTime, dayIds: value }) }}\r\n />\r\n
\r\n {props.language.alerts_interval_time_title_days}
\r\n{props.language.alerts_interval_time_title_range}
\r\n{props.language.alerts_interval_time_title_body}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n {props.language.alerts_title_initial_time}
\r\n\r\n \r\n { setAlertTime({ ...alertTime, fromHour: format(target.value, true) }) }} />\r\n
\r\n :
\r\n { setAlertTime({ ...alertTime, fromMinutes: format(target.value, false) }) }} />\r\n \r\n\r\n
\r\n \r\n
\r\n {props.language.alerts_title_final_time}
\r\n\r\n \r\n { setAlertTime({ ...alertTime, toHour: format(target.value, true) }) }} />\r\n
\r\n :
\r\n { setAlertTime({ ...alertTime, toMinutes: format(target.value, false) }) }} />\r\n \r\n\r\n { props.onChange(alertTime); props.setShowPeriodAlert(false) }}>\r\n {props.language.alerts_save_interval}\r\n \r\n
\r\n \r\n setAlert({ ...alert, intervalTime: value })}\r\n showAlertPeriod={showAlertPeriod}\r\n setShowPeriodAlert={setShowPeriodAlert}\r\n intervalTime={alert?.intervalTime}\r\n plusSelected={validateSecondBySecond()}\r\n />\r\n
\r\n \r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n language: state.shared.language,\r\n totalServices: state.services.totalServices,\r\n graphs: state.alerts.graphs,\r\n newAlert: state.shared.startOnboarding.new_alert,\r\n devices: state.plus.devices,\r\n theme: state.theme.theme,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n createAlertAsync: (payload) => dispatch(alertsActions.createAlertAsync(payload)),\r\n editAlertAsync: (payload) => dispatch(alertsActions.editAlertAsync(payload)),\r\n setControlledOnboarding: (payload) => dispatch(sharedActions.setControlledOnboarding(payload))\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Alerts);","import React, { useEffect, useState, Fragment } from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport * as notificationsActions from \"../../store/actions/Notifications\";\r\nimport * as alertsActions from \"../../store/actions/Alerts\";\r\n\r\nimport emptyData from '../../imgs/empty-data-notifications.svg';\r\nimport emptyDataLight from '../../imgs/empty-data-notifications-light.svg';\r\n\r\nimport emptyDataAlerts from '../../imgs/empty_state_alerts.svg';\r\n\r\nimport { Drawer } from \"rsuite\";\r\n\r\nimport ContentLoader from \"react-content-loader\";\r\n\r\nimport NotificationBox from \"./NotificationBox\";\r\n\r\nimport NewAlert from '../alerts/NewAlert';\r\n\r\nimport { track } from \"@amplitude/analytics-browser\";\r\nimport BackButton from \"../shared/utilities/BackButton\";\r\n\r\nconst NotificationsLoading = ({theme}) => {\r\n\r\n const height = 85;\r\n\r\n return (\r\n \r\n
\r\n \r\n handleClose()}> \r\n
\r\n \r\n
\r\n {props.alertSelected && props.editAlert ? props.language.alerts_label_title_edit_alert : props.language.alerts_label_title_new_alert}
\r\n\r\n
\r\n {props.language.alerts_label_body_new_alert}
\r\n\r\n {\r\n setAlert({ ...alert, name: target.value })\r\n }}\r\n />\r\n
\r\n \r\n
\r\n setActiveService(!activeService)}>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {alert.serviceIds.length ? language.alerts_new_alert_service_item : language.alerts_new_alert_service_label}
\r\n{alert.serviceIds.length ? formatLabel(alert.serviceIds, props.totalServices, 'idService', 'name') : language.alerts_new_alert_service_example}
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n e.stopPropagation()}\r\n className={`border-0 w-100 surface-bg-surface label-medium-medium content-default-secondary ${theme}`}\r\n placeholder={props.language.alerts_new_alert_search_proyects}\r\n value={searchTerm}\r\n onChange={({ target }) => setSearchTerm(target.value)}\r\n />\r\n
\r\n \r\n {Object.entries(groupedServices).map(([accountId, services]) => (\r\n
\r\n \r\n {/* Encabezado de la cuenta */}\r\n setAlert({ ...alert, serviceIds: value })}\r\n theme={theme}\r\n padding='py-3 ps-3 pe-1'\r\n plusSelected={true}\r\n />\r\n
\r\n ))}\r\n \r\n toggleSelectAllServicesByAccount(services)}\r\n >\r\n {services.every(service => alert.serviceIds.includes(service.idService))\r\n ? language.services_picker_deselect_all\r\n : language.services_picker_select_all}\r\n \r\n
\r\n {/* Listado de servicios */}\r\n \r\n {services[0]?.account?.name || language.alerts_new_alert_no_account}\r\n
\r\n setActiveVariable(!activeVariable)}>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {alert.graphIds.length ? language.alerts_new_alert_variable_item : language.alerts_new_alert_variable_label}
\r\n{alert.graphIds.length ? formatGraphLabel() : language.alerts_new_alert_variable_example}
\r\n\r\n { setAlert({ ...alert, graphIds: [_.last(value)] }) }}\r\n theme={theme}\r\n plusSelected={true}\r\n />\r\n
\r\n setActiveRule(!activeRule)}>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {alert.condition.length ? language.alerts_new_alert_rule_item : language.alerts_new_alert_rule_label}
\r\n{alert.condition.length ? formatLabel(alert.condition, conditions(props.language), 'id_condition', 'label') : language.alerts_new_alert_rule_example}
\r\n\r\n { setAlert({ ...alert, condition: [_.last(value)] }) }}\r\n theme={theme}\r\n />\r\n
\r\n setActiveValue(!activeValue)}>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {alert.value ? language.alerts_new_alert_value_item : language.alerts_new_alert_value_label}
\r\n{alert.value ? `${alert.value} ${alert?.graphIds?.length && props.graphs?.length ? props.graphs.options.filter(x => x?.id_graph === alert?.graphIds[0])[0]?.unit : \"\"}` : language.alerts_new_alert_value_example}
\r\n\r\n {\r\n setAlert({ ...alert, value: target.value })\r\n }}\r\n placeholder='000'\r\n />\r\n
\r\n setActiveChannel(!activeChannel)}>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n {alert.channelIds.length ? language.new_alert_type_title : language.new_alert_select_type}
\r\n{alert.channelIds.length ? formatLabel(alert.channelIds, channels(props.language), 'id_channel', 'label') : language.alerts_new_alert_channel_example}
\r\n\r\n { setAlert({ ...alert, channelIds: value }) }}\r\n theme={theme}\r\n />\r\n
\r\n \r\n
\r\n setShowPeriodAlert(true)}>\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {alert.intervalTime?.intervalIds.length ? `Intervalo ${formatLabel(alert.intervalTime.intervalIds, intervals(props.language), 'id_interval', 'label')}` : language.alerts_title_interval_time}
\r\n{alert.intervalTime?.dayIds.length ? `${formatLabel(alert.intervalTime.dayIds, days(props.language), 'id_day', 'label')} ${alert.intervalTime?.fromHour ? alert.intervalTime.fromHour : ''}:${alert.intervalTime?.fromMinutes ? alert.intervalTime.fromMinutes : ''}${alert.intervalTime?.fromPartOfDay ? alert.intervalTime.fromPartOfDay : ''}-${alert.intervalTime?.toHour ? alert.intervalTime.toHour : ''}:${alert.intervalTime?.toMinutes ? alert.intervalTime.toMinutes : ''}${alert.intervalTime?.toPartOfDay ? alert.intervalTime.toPartOfDay : ''}` : language.new_alert_schedule_description}
\r\n\r\n {\r\n if (props.editAlert) {\r\n await props.editAlertAsync(alert);\r\n }\r\n else {\r\n await props.createAlertAsync(alert);\r\n track('Alert created', { ...alertProperty, Project_Type: props.totalServices.filter(t => t.idService === alert.serviceIds[0])[0]?.type?.name })\r\n }\r\n props.setShowNewAlert(false);\r\n props.setAlertSelected(null);\r\n props.setEditAlert(false);\r\n setAlert(initAlert);\r\n }}>\r\n {props.language.alerts_button_save}\r\n \r\n
\r\n \r\n \r\n {Array.from({ length: 10 }, (_x, i) => i).map((i) =>
\r\n )\r\n};\r\n\r\nconst Notifications = (props) => {\r\n const currentUrl = new URL(window.location.href);\r\n const isDashboard = currentUrl.pathname === '/home'\r\n\r\n let notifications = props.notifications;\r\n let alertRegisters = props.alertRegisters;\r\n let notificationsLoading = props.notificationsLoading;\r\n let notificationsPagination = props.notificationsPagination;\r\n let alertRegistersPagination = props.alertRegistersPagination;\r\n let showBlackScreenDrawer = props.showBlackScreenDrawer;\r\n\r\n const loadNotificationsAsync = props.loadNotificationsAsync;\r\n const loadAlertRegistersAsync = props.loadAlertRegistersAsync;\r\n const loadTotalNotificationsAsync = props.loadTotalNotificationsAsync;\r\n\r\n const { theme } = props;\r\n\r\n const [type, setType] = useState(0);\r\n const [showNewAlert, setShowNewAlert] = useState(false);\r\n\r\n const handleScroll = (target) => {\r\n if (type === 0) {\r\n if (target.scrollTop + target.clientHeight >= (target.scrollHeight - 120) && notificationsPagination != null) {\r\n loadNotificationsAsync();\r\n }\r\n }\r\n if (type === 1) {\r\n if (target.scrollTop + target.clientHeight >= (target.scrollHeight - 120) && alertRegistersPagination != null) {\r\n loadAlertRegistersAsync();\r\n }\r\n }\r\n }\r\n\r\n const handleClose = () => {\r\n props.setShowNotifications(false)\r\n loadTotalNotificationsAsync()\r\n }\r\n\r\n useEffect(() => {\r\n if (!notifications.length && type === 0) {\r\n loadNotificationsAsync();\r\n }\r\n if (!alertRegisters.length && type === 1) {\r\n loadAlertRegistersAsync();\r\n }\r\n }, [notifications, loadNotificationsAsync, type, loadAlertRegistersAsync, alertRegisters]);\r\n\r\n return (\r\n handleScroll(target)}>\r\n {showBlackScreenDrawer &&\r\n \r\n {\r\n notifications.length ?\r\n notifications.map((notification) => {\r\n return (\r\n :\r\n \r\n {!isDashboard &&\r\n <>\r\n { }}\r\n setEditAlert={() => { }} />\r\n \r\n }\r\n {\r\n alertRegisters.length ?\r\n alertRegisters.map((notification) => {\r\n return (\r\n \r\n }\r\n
\r\n \r\n );\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n language: state.shared.language,\r\n notifications: state.notifications.notifications,\r\n notificationsPagination: state.notifications.notificationsPagination,\r\n notificationsLoading: state.notifications.notificationsLoading,\r\n showBlackScreenDrawer: state.shared.showBlackScreenDrawer,\r\n alertRegisters: state.alerts.alertRegisters,\r\n alertRegistersPagination: state.alerts.alertRegistersPagination,\r\n theme: state.theme.theme,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n loadNotificationsAsync: () => dispatch(notificationsActions.loadNotificationsAsync()),\r\n loadTotalNotificationsAsync: () => dispatch(notificationsActions.loadTotalNotificationsAsync()),\r\n loadAlertRegistersAsync: () => dispatch(alertsActions.loadAlertRegistersAsync())\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Notifications);\r\n\r\n\r\n","import * as creators from \"../creators/Chatbot\";\r\n\r\nimport { SETData, GETData } from \"../../services/WebServices\";\r\n\r\nimport moment from \"moment\";\r\n\r\nexport const setActiveChat = (payload) => {\r\n return {\r\n type: creators.SET_ACTIVE_CHAT,\r\n payload,\r\n };\r\n};\r\n\r\nexport const setLoadingChat = (payload) => {\r\n return {\r\n type: creators.SET_LOADING_CHAT,\r\n payload,\r\n };\r\n};\r\n\r\nexport const setMessages = (payload) => {\r\n return {\r\n type: creators.SET_MESSAGES,\r\n payload,\r\n };\r\n};\r\n\r\nexport const setCurrentConversation = (payload) => {\r\n return {\r\n type: creators.SET_CURRENT_CONVERSATION,\r\n payload,\r\n };\r\n};\r\n\r\nexport const setShowChatBot = (payload) => {\r\n return {\r\n type: creators.SET_SHOW_CHATBOT,\r\n payload,\r\n };\r\n};\r\n\r\nexport const setActiveChatMessages = (payload) => {\r\n return {\r\n type: creators.SET_ACTIVATE_CHAT_MESSAGES,\r\n payload,\r\n };\r\n};\r\n\r\nexport const setConversations = (payload) => {\r\n return {\r\n type: creators.SET_CONVERSATIONS,\r\n payload,\r\n };\r\n};\r\n\r\nexport const setShowBannerChatbot = (payload) => {\r\n return {\r\n type: creators.SET_SHOW_BANNER_CHATBOT,\r\n payload\r\n };\r\n};\r\n\r\nexport const loadConversations = () => {\r\n return async (dispatch) => {\r\n const user = JSON.parse(localStorage.getItem(\"user\"));\r\n\r\n GETData(`history?user=${user.idUser}`, \"GET\", process.env.REACT_APP_CHATBOT_API_URL)\r\n .then((response) => {\r\n dispatch(setConversations(response))\r\n })\r\n .catch((err) => console.error(err));\r\n };\r\n};\r\n\r\nexport const loadActiveChat = (payload) => {\r\n return async (dispatch) => {\r\n const user = JSON.parse(localStorage.getItem(\"user\"));\r\n\r\n dispatch(setLoadingChat(true));\r\n\r\n const entity = {\r\n id_user: user.idUser,\r\n id_conversation: payload,\r\n };\r\n\r\n SETData(\"messages\", \"POST\", entity, process.env.REACT_APP_CHATBOT_API_URL)\r\n .then((response) => {\r\n const conversationMessages = [];\r\n response.forEach((message) => {\r\n const userMessage = {\r\n id_content: message.id_content,\r\n message: message.request,\r\n sender: \"user\",\r\n date: moment(message.created_at).format(\"h:mm A\"),\r\n full_date: moment(message.created_at).format(\"ddd DD MMMM YYYY\"),\r\n onBoarding: null,\r\n };\r\n\r\n const botMessage = {\r\n id_content: message.id_content,\r\n message: message.response_summary ?? message.response,\r\n sender: \"chatbot\",\r\n date: moment(message.created_at).format(\"h:mm A\"),\r\n full_date: moment(message.created_at).format(\"ddd DD MMMM YYYY\"),\r\n onBoarding: null,\r\n score: message.score,\r\n };\r\n\r\n conversationMessages.push(userMessage);\r\n\r\n conversationMessages.push(botMessage);\r\n });\r\n\r\n if (!conversationMessages.length) {\r\n dispatch(setActiveChatMessages(true));\r\n }\r\n\r\n dispatch(setLoadingChat(false));\r\n\r\n dispatch(setMessages(conversationMessages));\r\n\r\n dispatch(setCurrentConversation(payload));\r\n })\r\n .catch((response) => console.error(response));\r\n \r\n };\r\n};\r\n\r\nexport const setActiveChatAsync = () => {\r\n return async (dispatch) => {\r\n const user = JSON.parse(localStorage.getItem(\"user\"));\r\n\r\n await SETData(`plus/chatbot/set/${user.idUser}`, \"POST\")\r\n .then((result) => {\r\n if (result?.body) {\r\n dispatch(setActiveChat(true));\r\n }\r\n })\r\n .catch((err) => console.error(err));\r\n };\r\n};\r\n\r\nexport const setConversation = (payload) => {\r\n return (dispatch, getState) => {\r\n const user = JSON.parse(localStorage.getItem(\"user\"));\r\n const activeServicesEnergy = getState().services.activeServicesEnergy;\r\n const currentConversationId = getState().chatbot.currentConversationId;\r\n const messages = getState().chatbot.messages;\r\n\r\n const services = activeServicesEnergy.map((x) => x?.idService);\r\n\r\n const entity = {\r\n id_user: user.idUser,\r\n id_conversation: currentConversationId,\r\n services: services,\r\n message: payload,\r\n };\r\n\r\n const newMessages = [\r\n ...messages,\r\n {\r\n message: payload,\r\n sender: \"user\",\r\n date: moment().format(\"h:mm A\"),\r\n full_date: moment().format(\"ddd DD MMMM YYYY\"),\r\n onBoarding: null,\r\n },\r\n {\r\n message: \"pending\",\r\n sender: \"chatbot\",\r\n date: moment().format(\"h:mm A\"),\r\n full_date: moment().format(\"ddd DD MMMM YYYY\"),\r\n onBoarding: null,\r\n },\r\n ];\r\n\r\n dispatch(setMessages(newMessages));\r\n\r\n SETData(\"send\", \"POST\", entity, process.env.REACT_APP_CHATBOT_IA_API_URL)\r\n .then((response) => {\r\n\r\n let chatbotResponse = \"\"\r\n let idContent = 0\r\n\r\n if (response === null) {\r\n\r\n chatbotResponse = \"Lo siento, parece que hubo un error al intentar procesar tu pregunta. Por favor, podrías reformularla para poder brindarte la información que necesitas.\";\r\n\r\n } else {\r\n\r\n chatbotResponse = response.response\r\n idContent = response.id_content\r\n\r\n if (response.status_code === 2) {\r\n chatbotResponse = \"Lo siento, parece que hubo un error al intentar procesar tu pregunta. Por favor, podrías reformularla para poder brindarte la información que necesitas.\";\r\n } else if (response.status_code === 3) {\r\n chatbotResponse = \"Lo siento, Por favor selecciona al menos un servicio al cual quieras relacionar esta pregunta.\";\r\n }\r\n\r\n }\r\n\r\n const updatedMessages = newMessages.map((item) => {\r\n if (item.sender === \"chatbot\" && item.message === \"pending\") {\r\n return { ...item, id_content: idContent, message: chatbotResponse };\r\n }\r\n\r\n return item;\r\n\r\n });\r\n\r\n if (response.id_conversation) {\r\n dispatch(setCurrentConversation(response.id_conversation));\r\n }\r\n\r\n dispatch(setMessages(updatedMessages));\r\n })\r\n .catch((response) => console.error(response));\r\n };\r\n};\r\n\r\nexport const setScore = (payload) => {\r\n return (dispatch, getState) => {\r\n const id_content = payload.id_content;\r\n const score = payload.score;\r\n\r\n const messages = getState().chatbot.messages;\r\n\r\n const updatedMessages = messages.map((item) => {\r\n if (item.id_content === id_content) {\r\n return { ...item, score: score };\r\n }\r\n return item;\r\n });\r\n\r\n dispatch(setMessages(updatedMessages));\r\n\r\n const entity = {\r\n id_content,\r\n score,\r\n };\r\n\r\n SETData(\"score\", \"PUT\", entity, process.env.REACT_APP_CHATBOT_API_URL).catch((response) => console.error(response));\r\n };\r\n};\r\n","import React from \"react\";\r\n\r\nimport { Popover } from \"@idui/react-popover\";\r\n\r\nconst TextTooltip = ({ text, content, bgColor = \"gray-800\" }) => {\r\n return (\r\n \r\n \r\n
}\r\n \r\n handleClose()}> \r\n
\r\n {props.language.notifications_title}
\r\n\r\n
\r\n {type === 0 ?\r\n \r\n
\r\n setType(0)}>\r\n
\r\n {props.language.notifications_show_all}
\r\n { setType(1) }}>\r\n
\r\n \r\n {props.language.notifications_show_alerts}
\r\n \r\n
\r\n );\r\n }) : null\r\n }\r\n {\r\n !notifications.length && !notificationsLoading &&\r\n \r\n 
\r\n
\r\n }\r\n {\r\n (notificationsLoading || notificationsPagination != null) ?\r\n {props.language.notifications_empty_state_title}
\r\n {props.language.notifications_empty_state_text}
\r\n \r\n \r\n
: \r\n }\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n }) : null\r\n }\r\n {\r\n !alertRegisters.length && !notificationsLoading &&\r\n \r\n 
\r\n
\r\n }\r\n {props.language.alerts_label_title_empty_state_registers}
\r\n {props.language.alerts_label_body_empty_state_registers}
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n setSearch(target.value)}\r\n />\r\n
\r\n \r\n {\r\n let services = servicesSelected;\r\n\r\n if (allServicesSelected) {\r\n if (services.length > 1) {\r\n services = services.filter(\r\n (item) =>\r\n !account.services\r\n .map((i) => i.idService)\r\n .includes(item.idService),\r\n );\r\n\r\n setServicesSelected(services);\r\n }\r\n } else {\r\n services = [...services, ...account.services];\r\n\r\n if (services.length <= limitSelectServices)\r\n setServicesSelected(services);\r\n }\r\n }}\r\n >\r\n \r\n {!allServicesSelected\r\n ? props.language.services_picker_select_all\r\n : props.language.services_picker_descelect_all}\r\n \r\n
\r\n )}\r\n \r\n {account.services.map((item) => {\r\n const isSelected =\r\n servicesSelected.findIndex(\r\n (i) => i.idService === item.idService,\r\n ) >= 0;\r\n\r\n return (\r\n \r\n \r\n {account.account.name}\r\n \r\n
\r\n \r\n \r\n
\r\n {allowAllServices && (\r\n \r\n \r\n {item.name}\r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n {`${props.language.lumi_consulting} ${activeServices?.length} ${props.language.lumi_projects}`}
\r\n\r\n {props.language.energy_click_to_change}\r\n
\r\nServicios consultados
\r\n Estos son los servicios que consultaste en tu pregunta
\r\n {item?.services?.length &&\r\n totalAccounts\r\n .filter((account) => account?.services?.map((x) => x?.idService).includes(item?.services[0]))[0]\r\n ?.services?.filter((service) => item?.services?.includes(service?.idService))\r\n ?.map((service, i) => (\r\n {item?.message}
\r\n \r\n );\r\n };\r\n\r\n return (\r\n Nuevo chat
\r\n \r\nTus chats
\r\n {conversations?.filter((item) => !moment(item?.date)?.isBefore(moment().subtract(7, \"days\"), \"day\")).length && Últimos 7 días
}\r\n {conversations\r\n ?.filter((item) => !moment(item?.date)?.isBefore(moment().subtract(7, \"days\"), \"day\"))\r\n .map((item, id) => (\r\n Últimos 30 días
}\r\n {conversations\r\n ?.filter((item) => moment(item?.date)?.isBefore(moment().subtract(30, \"days\"), \"day\"))\r\n .map((item, id) => (\r\n \r\n\r\n {\r\n showChatsResume && setActiveChatAsync()}\r\n className=\"bg-green-500 rounded-8 m-3 py-2 pe-pointer text-wrap text-center txt-phrase txt-semibold txt-green-800 txt-8\">\r\n {language.lumi_do_click_here}\r\n
\r\n ) : (\r\n \r\n {showBlackScreenDrawer && (\r\n \r\n \r\n
\r\n )}\r\n {!enableChatBot ? (\r\n \r\n \r\n
\r\n {language.lumi_title}
\r\n {language.lumi_first_text}
\r\n {language.lumi_second_text}
\r\n {!activeChat ? (\r\n \r\n
\r\n )}\r\n \r\n ) : loadingChat ? (\r\n {language.lumi_title_card}
\r\n {language.lumi_first_text_card}
\r\n {language.lumi_second_text_title}
\r\n \r\n
\r\n ) : (\r\n \r\n \r\n
\r\n \r\n {\r\n setActiveServicesEnergy(value);\r\n setActiveServicesPlus([_.last(value)]);\r\n }}\r\n availableTypeServices={[\"energy\", \"plus\", \"generation\"]}\r\n limitSelectServices={3}\r\n typeComponent={\"chatbot\"}\r\n />\r\n
\r\n \r\n {!messages.length && (\r\n \r\n {group.full_date !== null && group.full_date !== undefined && (\r\n \r\n
\r\n ))}\r\n \r\n ¡{language.lumi_hey}, {user.name}!
\r\n
\r\n )}\r\n {messages.length &&\r\n groupMessageDate(messages).map((group, index) => {\r\n return (\r\n
{language.lumi_question}
\r\n\r\n
\r\n )}\r\n {group.messages.map((item, index) => (\r\n {group.full_date}
\r\n \r\n
\r\n {item?.sender === \"user\" ? language.lumi_you_chat : \"Lumi\"}
\r\n \r\n {item?.sender !== \"user\" && (\r\n
\r\n {item?.sender !== \"user\" && item?.message !== \"pending\" && item?.id_content !== 0 && (\r\n \r\n
\r\n )}\r\n \r\n {item?.message !== \"pending\" ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n {item?.onBoarding !== null ? (\r\n
\r\n \r\n {language.lumi_explanation}\r\n handleOnBoarding(item?.onBoarding)}\r\n className=\"pe-pointer\">\r\n {language.lumi_go_tutorial}\r\n \r\n
\r\n ) : (\r\n {replaceMessageLink(item?.message)}
\r\n )}\r\n {item?.date}
\r\n . . .
\r\n )}\r\n \r\n {\r\n if (item?.score !== 1) setScore({ id_content: item?.id_content, score: 1 });\r\n }}\r\n />\r\n {\r\n if (item?.score !== 2) setScore({ id_content: item?.id_content, score: 2 });\r\n }}\r\n />\r\n
\r\n )}\r\n Califica esta respuesta
\r\n \r\n {!messages.length && \r\n
\r\n Preguntas sugeridas
\r\n\r\n \r\n \r\n \r\n {aids.map((value, index) => (\r\n \r\n setRequest(value)}\r\n >\r\n
\r\n \r\n ))}\r\n \r\n \r\n {value}\r\n
\r\n\r\n
\r\n ) : (\r\n setShowChatsResume(!showChatsResume)}>\r\n
\r\n {activeChatMessages || currentConversationId === null ? (\r\n \r\n \r\n
\r\n \r\n setRequest(target?.value)}\r\n onKeyDown={(event) => {\r\n if (event.key === \"Enter\" && request) {\r\n handleSendMessage();\r\n }\r\n }}\r\n />\r\n {\r\n if (request) {\r\n handleSendMessage();\r\n track(\"Ai message sent\");\r\n }\r\n }}>\r\n \r\n
\r\n BETA
\r\n {language.lumi_continue_conversation}
\r\n\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n language: state.shared.language,\r\n user: state.users.user,\r\n messages: state.chatbot.messages,\r\n activeChat: state.chatbot.activeChat,\r\n loadingChat: state.chatbot.loadingChat,\r\n totalServices: state.services.totalServices,\r\n activeServicesEnergy: state.services.activeServicesEnergy,\r\n showBlackScreenDrawer: state.shared.showBlackScreenDrawer,\r\n currentConversationId: state.chatbot.currentConversationId,\r\n totalAccounts: state.accounts.totalAccounts,\r\n account: state.accounts.account,\r\n showChatBot: state.chatbot.showChatBot,\r\n activeChatMessages: state.chatbot.activeChatMessages,\r\n showBannerChatbot: state.chatbot.showBannerChatbot,\r\n theme: state.theme.theme,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n setActiveChatAsync: () => dispatch(chatbotActions.setActiveChatAsync()),\r\n setConversation: (payload) => dispatch(chatbotActions.setConversation(payload)),\r\n setActiveServicesPlus: (payload) => dispatch(servicesActions.setActiveServicesPlus(payload)),\r\n setActiveServicesEnergy: (payload) => dispatch(servicesActions.setActiveServicesEnergy(payload)),\r\n setAccount: (payload) => dispatch(accountsActions.setAccount(payload)),\r\n setShowChatBot: (payload) => dispatch(chatbotActions.setShowChatBot(payload)),\r\n setActiveChatMessages: (payload) => dispatch(chatbotActions.setActiveChatMessages(payload)),\r\n setScore: (payload) => dispatch(chatbotActions.setScore(payload)),\r\n loadServicesAsync: (payload) => dispatch(servicesActions.loadServicesAsync(payload)),\r\n loadConversations: () => dispatch(chatbotActions.loadConversations())\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ChatBot);\r\n","import React, { Fragment, useState, useEffect } from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\nimport * as accountsActions from \"../../store/actions/Accounts\";\r\nimport * as notificationsActions from \"../../store/actions/Notifications\";\r\nimport * as themeActions from \"../../store/actions/Theme\";\r\n\r\nimport Support from \"./Support\";\r\nimport Neugets from \"./Neugets\";\r\nimport Notifications from \"../notifications/Notifications\";\r\n\r\nimport BackButton from \"./utilities/BackButton\";\r\n\r\nimport Chatbot from \"./Chatbot\";\r\nimport { themes } from \"../../utils/enums\";\r\n\r\nconst Header = (props) => {\r\n let history = useHistory(); \r\n\r\n let account = props.account;\r\n let user = props.user;\r\n let totalNotificationsInfo = props.totalNotificationsInfo;\r\n\r\n const loadNeugetsByAccountAsync = props.loadNeugetsByAccountAsync;\r\n const loadTotalNotificationsAsync = props.loadTotalNotificationsAsync;\r\n const { theme, setTheme } = props;\r\n\r\n const [showSupport, setShowSupport] = useState(false);\r\n const [showNeugets, setShowNeugets] = useState(false);\r\n const [showNotifications, setShowNotifications] = useState(false);\r\n const [showChatBot, setShowChatBot] = useState(false); \r\n\r\n const toggleTheme = () => {\r\n const newTheme = theme === themes.LIGHT ? themes.DARK : themes.LIGHT;\r\n setTheme(newTheme);\r\n };\r\n\r\n useEffect(() => {\r\n if (account !== null) loadNeugetsByAccountAsync();\r\n }, [account, loadNeugetsByAccountAsync]);\r\n\r\n useEffect(() => loadTotalNotificationsAsync(), [loadTotalNotificationsAsync]); \r\n\r\n return (\r\n \r\n {props.backToButton && (\r\n history.goBack()} theme={theme} />\r\n )}\r\n \r\n {props.moduleName}\r\n \r\n
\r\n \r\n {\r\n {\r\n window.open(\r\n user.capabilities.show_panama_emergency_line\r\n ? \"https://api.whatsapp.com/send?phone=50765229500&text=%C2%A1Estamos%20felices%20de%20poder%20ayudarte!\"\r\n : 'https://api.whatsapp.com/send?phone=5716659652&text=%C2%A1Estamos%20felices%20de%20poder%20ayudarte!',\r\n );\r\n }}\r\n >\r\n
\r\n )}\r\n {user.capabilities?.show_header_support_button && (\r\n \r\n \r\n {props.language.support_emergency_button}\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n {props.language.support_help_button}\r\n \r\n
\r\n \r\n )}\r\n {user.capabilities?.show_header_notifications_button && (\r\n \r\n
\r\n \r\n \r\n {props.language.notifications_title}\r\n \r\n
\r\n \r\n )}\r\n {user.capabilities?.show_header_notifications_button && (\r\n \r\n 0 ? \"100\" : \"0\"\r\n }`}\r\n />\r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n
\r\n {/* \r\n {theme === \"dark\"\r\n ? props.language.dark\r\n : props.language.light}\r\n */}\r\n \r\n \r\n {language ? language[item[labelName]] : item[labelName]}\r\n
\r\n {isSelected && (\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n theme: state.theme.theme,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n setTheme: (theme) => dispatch(themeActions.setTheme(theme)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Select);","import React from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { useHistory } from 'react-router-dom';\r\nimport * as usersActions from '../../store/actions/Users';\r\nimport { Modal } from 'rsuite';\r\n\r\nconst ModalSuccess = (props) => {\r\n const { theme, language, infoInviteSuccessModal, setShowCreateUserModal, loadUsersAsync, onClose, onAddMoreUsers } =\r\n props;\r\n const history = useHistory();\r\n\r\n const handleClose = () => {\r\n setShowCreateUserModal(false);\r\n loadUsersAsync();\r\n history.push('/users');\r\n if (onClose) onClose();\r\n };\r\n\r\n const handleAddMoreUsers = () => {\r\n if (onAddMoreUsers) {\r\n onAddMoreUsers();\r\n }\r\n };\r\n\r\n const handleLinkClick = (e) => {\r\n e.preventDefault();\r\n handleClose();\r\n };\r\n\r\n return (\r\n \r\n {label && (\r\n setActive(!active)}\r\n >\r\n \r\n {options.find((item) => item[keyName] === value)?.[labelName] ||\r\n defaultMessage}\r\n \r\n \r\n \r\n
\r\n {error && (\r\n \r\n {label}\r\n {required ? * : <>}\r\n
\r\n )}\r\n\r\n {error}\r\n
\r\n )}\r\n\r\n
\r\n \r\n {props.language.users_title_header_modal_success}\r\n
\r\n\r\n
\r\n \r\n {`Has enviado ${infoInviteSuccessModal?.users?.length || 0} invitaciones para acceder a ${\r\n infoInviteSuccessModal?.idServices?.length || 0\r\n } servicios.`}\r\n
\r\n \r\n {language['users_first_description_modal_success']}\r\n \r\n {language['users_link_description_modal_success']}\r\n \r\n {language['users_second_description_modal_success']}\r\n
\r\n \r\n {language['users_button_new_user_success_modal']}\r\n
\r\n \r\n{language['users_button_finish_success_modal']}
\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n language: state.shared.language,\r\n theme: state.theme.theme,\r\n infoInviteSuccessModal: state.users.infoInviteSuccessModal,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n setShowCreateUserModal: (payload) => dispatch(usersActions.setShowCreateUserModal(payload)),\r\n loadUsersAsync: (payload) => dispatch(usersActions.loadUsersAsync(payload)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ModalSuccess);\r\n","import React from 'react'\r\nimport { connect } from 'react-redux';\r\n\r\nconst InputRounded = ({ placeholder,icon, value, type, required, disabled = false,onChange, onPressEnter, focus = false, error, theme, px = 3, py = 3, concatClassName='',}) => {\r\n \r\n const paddingClasses = `px-${px} py-${py}`;\r\n\r\n return (\r\n\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n theme: state.theme.theme\r\n})\r\n\r\nexport default connect(mapStateToProps)(InputRounded)","import React, { useState, useEffect, useMemo } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport * as usersActions from '../../store/actions/Users';\r\nimport { Modal } from 'rsuite';\r\nimport InputRounded from '../shared/utilities/InputRounded';\r\nimport MultipleSelect from '../shared/utilities/MultipleSelect'; // Importa el nuevo componente\r\n\r\nconst ModalService = ({\r\n theme,\r\n showCreateUserModal,\r\n accounts,\r\n userServicesSelected,\r\n setShowCreateUserModal,\r\n setUserServicesSelected,\r\n setSelectedAccount,\r\n selectedAccount,\r\n language,\r\n onClose,\r\n mode = 'add',\r\n}) => {\r\n const [searchQuery, setSearchQuery] = useState('');\r\n const [selectedIds, setSelectedIds] = useState([]);\r\n const [selectedAccounts, setSelectedAccounts] = useState([]); \r\n\r\n \r\n const getSelectedAccountNames = () => {\r\n if (!Array.isArray(accounts) || accounts.length === 0 || selectedAccounts.length === 0) {\r\n return ''; // Si no hay cuentas seleccionadas, devuelve una cadena vacía\r\n }\r\n\r\n const selectedNames = accounts\r\n .filter((acc) => selectedAccounts.includes(acc.idAccount))\r\n .map((acc) => acc.name);\r\n\r\n return selectedNames.join(', '); \r\n };\r\n\r\n useEffect(() => {\r\n if (selectedAccounts.length === 0 && Array.isArray(accounts) && accounts.length > 0) {\r\n setSelectedAccounts([accounts[0].idAccount]); \r\n }\r\n }, [accounts, selectedAccounts, setSelectedAccounts]);\r\n\r\n useEffect(() => {\r\n const servicesKey = mode === 'add' ? 'newServices' : 'updatedServices';\r\n setSelectedIds(userServicesSelected[servicesKey] || []);\r\n }, [userServicesSelected, mode]);\r\n\r\n const handleBack = () => {\r\n setShowCreateUserModal(true);\r\n onClose();\r\n };\r\n\r\n const handleDone = () => {\r\n setUserServicesSelected({\r\n key: mode === 'add' ? 'newServices' : 'updatedServices',\r\n value: selectedIds,\r\n });\r\n setShowCreateUserModal(true);\r\n onClose();\r\n };\r\n\r\n const handleServiceSelection = (service) => {\r\n const isSelected = selectedIds.includes(service.idService);\r\n if (isSelected) {\r\n setSelectedIds(selectedIds.filter((id) => id !== service.idService));\r\n } else {\r\n setSelectedIds([...selectedIds, service.idService]);\r\n }\r\n };\r\n\r\n const handleSelectAll = (groupServices) => {\r\n const allIds = groupServices.map((service) => service.idService);\r\n const allSelected = allIds.every((id) => selectedIds.includes(id));\r\n if (allSelected) {\r\n setSelectedIds(selectedIds.filter((id) => !allIds.includes(id)));\r\n } else {\r\n setSelectedIds([...new Set([...selectedIds, ...allIds])]);\r\n }\r\n };\r\n\r\n const filteredServices = useMemo(() => {\r\n if (!Array.isArray(accounts) || accounts.length === 0 || selectedAccounts.length === 0) {\r\n return [];\r\n }\r\n\r\n const selectedAccs = accounts.filter((acc) => selectedAccounts.includes(acc.idAccount));\r\n if (selectedAccs.length === 0) {\r\n return [];\r\n }\r\n\r\n const services = selectedAccs.flatMap((acc) => (Array.isArray(acc.services) ? acc.services : []));\r\n\r\n return services.filter((service) => {\r\n const matchesSearch = searchQuery\r\n ? (service.name || '').toLowerCase().includes(searchQuery.toLowerCase()) ||\r\n (service.address || '').toLowerCase().includes(searchQuery.toLowerCase())\r\n : true;\r\n return matchesSearch;\r\n });\r\n }, [accounts, selectedAccounts, searchQuery]);\r\n\r\n const groupedServices = useMemo(() => {\r\n if (!filteredServices.length) {\r\n return [];\r\n }\r\n\r\n const groupedByType = filteredServices.reduce((acc, service) => {\r\n const typeName = service.type?.name || 'Unknown';\r\n if (!acc[typeName]) {\r\n acc[typeName] = {\r\n type:\r\n typeName === 'energy'\r\n ? language['services_picker_type_consumption'] || 'Consumo'\r\n : typeName === 'generation'\r\n ? language['services_picker_type_generation'] || 'Generación'\r\n : typeName === 'efficiency'\r\n ? 'Eficiencia'\r\n : typeName,\r\n key: typeName,\r\n services: [],\r\n };\r\n }\r\n acc[typeName].services.push(service);\r\n return acc;\r\n }, {});\r\n\r\n const grouped = Object.values(groupedByType).filter((group) => group.services.length > 0);\r\n return grouped;\r\n }, [filteredServices, language]);\r\n\r\n if (showCreateUserModal !== 2) return null;\r\n\r\n return (\r\n \r\n {icon ? : null}\r\n keyCode === 13 && onPressEnter && onPressEnter()} />\r\n
\r\n {error ? {error}
: null}\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {language['new_user_title_header']}\r\n
\r\n\r\n setSearchQuery(target.value)}\r\n />\r\n \r\n
\r\n ))\r\n ) : (\r\n \r\n ({ label: acc.name, value: acc.idAccount }))\r\n : []\r\n }\r\n selectedData={selectedAccounts} \r\n onChange={(selectedValues) => setSelectedAccounts(selectedValues)} \r\n width={278}\r\n label={language['dashboard_label_select_account'] || 'Seleccionar cuenta'}\r\n theme={theme}\r\n />\r\n
\r\n {groupedServices.length > 0 ? (\r\n groupedServices.map((group, index) => (\r\n \r\n handleServiceSelection(service)}\r\n >\r\n
\r\n );\r\n })}\r\n \r\n handleSelectAll(group.services)}\r\n >\r\n {group.services.every((s) => selectedIds.includes(s.idService))\r\n ? language['dashboard_label_picker_services_all_unselected'] ||\r\n 'Deseleccionar todos'\r\n : language['dashboard_label_picker_services_all_selected'] ||\r\n 'Seleccionar todos'}\r\n \r\n
\r\n {group.services.map((service) => {\r\n const isSelected = selectedIds.includes(service.idService);\r\n return (\r\n \r\n
\r\n \r\n {group.type}\r\n
\r\n\r\n \r\n {service.name || 'Sin nombre'}\r\n \r\n \r\n {service.address || 'Sin dirección'}\r\n \r\n
\r\n \r\n {language['dashboard_empty_state_picker_services']}\r\n
\r\n )}\r\n \r\n \r\n\r\n {selectedIds.length} {language['users_label_count_services'] || 'seleccionados'}\r\n
\r\n \r\n\r\n {language['dashboard_filter_done_button'] || 'Hecho'}\r\n
\r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n showCreateUserModal: state.users.showCreateUserModal,\r\n theme: state.theme.theme,\r\n accounts: state.accounts.totalAccounts,\r\n userServicesSelected: state.users.userServicesSelected,\r\n selectedAccount: state.users.accountSelectedUsersTable,\r\n language: state.shared.language,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n setShowCreateUserModal: (payload) => dispatch(usersActions.setShowCreateUserModal(payload)),\r\n setUserServicesSelected: (payload) => dispatch(usersActions.setUserServicesSelected(payload)),\r\n setSelectedAccount: (payload) => dispatch(usersActions.setAccountSelectedUsersTable(payload)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ModalService);","import React, { useState, useEffect } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport { useHistory } from 'react-router-dom';\r\nimport * as usersActions from '../../store/actions/Users';\r\nimport { Modal, Tooltip, Whisper } from 'rsuite';\r\nimport Select from '../shared/utilities/Select';\r\nimport ModalSuccess from './ModalSuccess';\r\nimport ModalService from './ModalService';\r\nimport empty_users from '../../imgs/empty-users.svg';\r\nimport empty_users_light from '../../imgs/empty-user-light.svg';\r\n\r\nconst isValidateEmail = (email) => /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email);\r\nconst isValidColombianPhone = (phone) => {\r\n return /^\\d{10}$/.test(phone) || /^\\+57\\d{10}$/.test(phone);\r\n};\r\n\r\nconst NewUser = ({\r\n theme,\r\n showCreateUserModal,\r\n language,\r\n userServicesSelected,\r\n setShowCreateUserModal,\r\n user,\r\n setUsersToInvite,\r\n getUserRegisteredAsync,\r\n loadInviteUserAsync,\r\n setUserServicesSelected,\r\n userRegisteredLoading,\r\n usersLoading,\r\n showInviteSuccessModal,\r\n usersToInvite: reduxUsersToInvite,\r\n userTypesSelect,\r\n getUserTypesAsync,\r\n}) => {\r\n const history = useHistory();\r\n\r\n const [modalState, setModalState] = useState(null);\r\n const [inputValue, setInputValue] = useState('');\r\n const [usersToInvite, setLocalUsersToInvite] = useState([]);\r\n const [error, setError] = useState('');\r\n const [isEnable, setEnable] = useState(false);\r\n\r\n useEffect(() => {\r\n if (showCreateUserModal === true) {\r\n setModalState('newUser');\r\n } else if (showCreateUserModal === 2) {\r\n setModalState('service');\r\n } else if (showCreateUserModal === 3) {\r\n setModalState('success');\r\n } else {\r\n setModalState(null);\r\n }\r\n }, [showCreateUserModal]);\r\n\r\n useEffect(() => {\r\n if (user?.userType.idUserType) {\r\n getUserTypesAsync(user?.userType.idUserType);\r\n }\r\n // eslint-disable-next-line\r\n }, [user]);\r\n\r\n useEffect(() => {\r\n if (showInviteSuccessModal === true) {\r\n setModalState('success');\r\n setShowCreateUserModal(3);\r\n }\r\n // eslint-disable-next-line\r\n }, [showInviteSuccessModal]);\r\n\r\n useEffect(() => {\r\n const hasInvalidUser = usersToInvite.some(\r\n (item) => item.userExist && user.userType?.idUserType === 1 && item.userType?.idUserType === 0\r\n );\r\n setEnable(userServicesSelected.newServices.length > 0 && usersToInvite.length > 0 && !hasInvalidUser);\r\n }, [userServicesSelected.newServices, usersToInvite, user.userType]);\r\n\r\n useEffect(() => {\r\n if (reduxUsersToInvite.length) {\r\n setLocalUsersToInvite(reduxUsersToInvite);\r\n }\r\n }, [reduxUsersToInvite]);\r\n\r\n const handleKeyDown = async (event) => {\r\n if (event.key !== 'Enter' || !inputValue.trim()) return;\r\n\r\n const trimmedInput = inputValue.trim();\r\n let validateInput = null;\r\n\r\n if (isValidateEmail(trimmedInput)) {\r\n validateInput = {\r\n email: trimmedInput,\r\n phone: null,\r\n userType: { idUserType: 1, description: 'Colaborador' },\r\n };\r\n } else if (isValidColombianPhone(trimmedInput)) {\r\n const normalizedPhone = trimmedInput.startsWith('+57') ? trimmedInput : `+57${trimmedInput}`;\r\n validateInput = {\r\n email: null,\r\n phone: normalizedPhone,\r\n userType: { idUserType: 1, description: 'Colaborador' },\r\n };\r\n }\r\n\r\n if (validateInput) {\r\n const exists = usersToInvite.some(\r\n (u) =>\r\n (validateInput.email && u.email === validateInput.email) ||\r\n (validateInput.phone && u.phone === validateInput.phone)\r\n );\r\n\r\n if (!exists) {\r\n await getUserRegisteredAsync({\r\n email: validateInput.email,\r\n phone: validateInput.phone,\r\n });\r\n } else {\r\n setError(language['user_alert_duplicate_user_to_invite']);\r\n }\r\n setInputValue('');\r\n } else {\r\n setError(language['user_alert_invalid_fields_error']);\r\n }\r\n event.preventDefault();\r\n };\r\n\r\n const handleDelete = (identifier) => {\r\n const updatedUsers = usersToInvite.filter((user) => (user.phone || user.email) !== identifier);\r\n setLocalUsersToInvite(updatedUsers);\r\n setUsersToInvite(updatedUsers);\r\n };\r\n\r\n const handleClose = () => {\r\n setModalState(null);\r\n setShowCreateUserModal(false);\r\n setLocalUsersToInvite([]);\r\n setUsersToInvite([]);\r\n setInputValue('');\r\n setError('');\r\n setUserServicesSelected({ key: 'newServices', value: [] });\r\n };\r\n\r\n const openModalService = () => {\r\n setModalState('service');\r\n setShowCreateUserModal(2);\r\n };\r\n\r\n const handleSaveServices = (selectedIds) => {\r\n setUserServicesSelected({ key: 'newServices', value: selectedIds });\r\n setModalState('newUser');\r\n setShowCreateUserModal(true);\r\n };\r\n\r\n const openModalSuccess = async () => {\r\n if (usersToInvite.length && userServicesSelected.newServices.length) {\r\n await loadInviteUserAsync(user.capabilities.show_users_admin_view);\r\n } else {\r\n setError(language['user_alert_incomplete_fields_error']);\r\n }\r\n };\r\n\r\n const goToUserTable = () => {\r\n handleClose();\r\n history.push('/users');\r\n };\r\n\r\n return (\r\n <>\r\n {modalState === 'newUser' && (\r\n\r\n
\r\n \r\n {language['new_user_title_header']}\r\n
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n {language['new_user_label_picker_services']}\r\n
\r\n\r\n {`${userServicesSelected.newServices.length} ${language['users_label_count_services']}`}\r\n
\r\n\r\n setInputValue(e.target.value)}\r\n onKeyDown={handleKeyDown}\r\n placeholder={language['new_user_placeholder_input_users']}\r\n disabled={userRegisteredLoading}\r\n className={`w-100 py-2 px-3 rounded-30 border-fill-medium surface-bg-surface label-small-medium content-default-secondary ${theme}`}\r\n />\r\n {error && (\r\n \r\n {error}\r\n \r\n )}\r\n
\r\n \r\n {language['new_user_label_input_users']}\r\n
\r\n\r\n
\r\n \r\n {usersToInvite.map((item, index) => {\r\n const hasError =\r\n !user.capabilities.show_users_admin_view &&\r\n item.userType?.idUserType !== 17;\r\n return (\r\n \r\n \r\n Podrás cambiar el rol desde el módulo usuarios.\r\n \r\n }\r\n >\r\n \r\n \r\n {language['new_user_label_registered_user']}\r\n \r\n
\r\n \r\n ) : null}\r\n \r\n {userTypesSelect && (\r\n \r\n \r\n {item.name ? item.name : item.phone || item.email}\r\n \r\n {hasError ? (\r\n \r\n Este usuario tiene un permiso superior. No\r\n puedes asignar nuevos proyectos.\r\n \r\n }\r\n >\r\n \r\n \r\n No puedes invitar a este usuario\r\n \r\n
\r\n \r\n ) : item.userExist ? (\r\n \r\n {hasError ? null : !item.userExist ? (\r\n \r\n {item.userType?.description}\r\n
\r\n )}\r\n \r\n {\r\n const updatedUsers = usersToInvite.map((u) =>\r\n (u.phone || u.email) ===\r\n (item.phone || item.email)\r\n ? {\r\n ...u,\r\n userType: {\r\n idUserType: value,\r\n description:\r\n userTypesSelect.filter(\r\n (type) =>\r\n type.idUserType ===\r\n value\r\n )[0].description,\r\n },\r\n }\r\n : u\r\n );\r\n setLocalUsersToInvite(updatedUsers);\r\n setUsersToInvite(updatedUsers);\r\n }}\r\n disabled={item.userExist}\r\n />\r\n
\r\n \r\n ) : (\r\n \r\n {language['new_user_button_users_module']}\r\n
\r\n \r\n\r\n {usersLoading ? 'Enviando...' : language['new_user_button_send_invitation']}\r\n
\r\n \r\n \r\n \r\n \r\n )}\r\n\r\n {modalState === 'service' && (\r\n\r\n \r\n setSearchQuery(target.value)}\r\n />\r\n )}\r\n {groupedServices.length > 0 ? (\r\n groupedServices.map((group, index) => (\r\n
\r\n ))\r\n ) : (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n Servicios asignados\r\n
\r\n \r\n
\r\n {currentUser.capabilities?.show_users_admin_view && (\r\n \r\n {selectedUser?.name || \"\"}\r\n
\r\n |
\r\n \r\n {selectedUser?.rol || \"\"}\r\n
\r\n \r\n
\r\n ))}\r\n \r\n handleSelectAll(group)}\r\n >\r\n {Object.values(group.accounts)\r\n .flat()\r\n .every((s) =>\r\n selectedData.includes(s.idService) ||\r\n initialServices.includes(s.idService)\r\n )\r\n ? language[\"dashboard_label_picker_services_all_unselected\"] ||\r\n \"Deseleccionar todos\"\r\n : language[\"dashboard_label_picker_services_all_selected\"] ||\r\n \"Seleccionar todos\"}\r\n \r\n )}\r\n
\r\n {Object.keys(group.accounts).map((accountName, accountIndex) => (\r\n \r\n
\r\n {currentUser.capabilities?.show_users_admin_view && (\r\n \r\n {group.key}\r\n
\r\n\r\n {group.accounts[accountName].map((service, serviceIndex) => {\r\n const isSelected = selectedData.includes(service.idService);\r\n const isInitial = initialServices.includes(service.idService);\r\n return (\r\n handleServiceSelection(service)}\r\n style={{\r\n cursor:\r\n !currentUser.capabilities?.show_users_admin_view && isInitial\r\n ? \"not-allowed\"\r\n : \"pointer\",\r\n }}\r\n >\r\n
\r\n );\r\n })}\r\n \r\n \r\n {service.name}\r\n \r\n \r\n {service.address || \"Sin dirección\"}\r\n \r\n
\r\n \r\n {language[\"dashboard_empty_state_picker_services\"] || \"No hay proyectos disponibles\"}\r\n
\r\n )}\r\n \r\n\r\n \r\n
\r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default UpdateService;","import React, { useEffect, useMemo, useState } from \"react\";\r\nimport { connect } from \"react-redux\";\r\nimport * as usersActions from \"../../store/actions/Users\";\r\nimport * as sharedActions from \"../../store/actions/Shared\";\r\nimport Select from \"../shared/utilities/Select\";\r\nimport NewUser from './NewUser';\r\nimport UpdateService from './UpdateService';\r\nimport ContentLoader from 'react-content-loader';\r\n\r\nconst AccountHeader = ({ accountName, theme }) => (\r\n \r\n \r\n
\r\n {currentUser.capabilities?.show_users_admin_view ? (\r\n \r\n {selectedData.length} {language[\"users_label_count_services\"] || \"seleccionados\"}\r\n
\r\n\r\n {language[\"dashboard_filter_done_button\"] || \"Hecho\"}\r\n
\r\n \r\n ) : null}\r\n\r\n
\r\n \r\n {accountName}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n\r\n const userAreaTemplate = (rowData) => (\r\n \r\n {rowData.name || 'Sin nombre'}\r\n
\r\n\r\n
\r\n );\r\n\r\n const userRolTemplate = (rowData) => {\r\n const options = userTypes.map(userType => ({\r\n label: userType.description,\r\n value: userType.idUserType\r\n }));\r\n\r\n const userRole = userTypes.find(userType => userType.idUserType === rowData.idUserType || userType.idUserType === rowData.idRol)?.description || 'Desconocido';\r\n\r\n return (\r\n \r\n {rowData.area || 'Sin cargo'}\r\n
\r\n\r\n
\r\n );\r\n };\r\n\r\n const userProjectsTemplate = (rowData) => {\r\n const totalServices = rowData.servicesIds ? rowData.servicesIds.length : 0;\r\n\r\n return (\r\n \r\n {props.currentUser.capabilities?.show_users_admin_view ? (\r\n {\r\n if (updateUserAsync) {\r\n const updatedUser = {\r\n ...rowData,\r\n idUserType: value,\r\n rol: userTypes.find(userType => userType.idUserType === value)?.description || 'Desconocido'\r\n };\r\n await updateUserAsync({ user: updatedUser });\r\n }\r\n }}\r\n />\r\n ) : (\r\n
\r\n \r\n
\r\n )}\r\n \r\n {userRole}\r\n
\r\n\r\n {\r\n setSelectedUserForUpdate(rowData);\r\n setShowUpdateServiceModal(true);\r\n setShowBlackScreen(true);\r\n }}\r\n >\r\n
\r\n );\r\n };\r\n\r\n const userEmailTemplate = (rowData) => (\r\n \r\n {totalServices}\r\n
\r\n {props.currentUser.capabilities?.show_users_admin_view ? (\r\n \r\n ) : null}\r\n \r\n\r\n
\r\n );\r\n\r\n const userPhoneTemplate = (rowData) => (\r\n \r\n {rowData.email || 'Sin email'}\r\n
\r\n\r\n
\r\n );\r\n\r\n const userRecordTemplate = (rowData) => (\r\n \r\n {rowData.phone || 'Sin teléfono'}\r\n
\r\n\r\n
\r\n );\r\n\r\n const handleDelete = (rowData) => {\r\n if (selectedAccount) {\r\n deleteUserAsync(rowData.idUser, selectedAccount);\r\n }\r\n };\r\n\r\n const userDeleteTemplate = (rowData) => {\r\n return (\r\n \r\n {rowData.recordDate || 'Sin actividad'}\r\n
\r\n\r\n handleDelete(rowData)}\r\n className={`row-center align-items-center surface-bg-on-surface border-fill-medium rounded-pill ${theme}`}\r\n style={{ height: 32, width: 32 }}\r\n >\r\n \r\n \r\n
\r\n );\r\n };\r\n\r\n const columnWidths = {\r\n name: '18%',\r\n area: '13%',\r\n role: '15%',\r\n projects: '9%',\r\n email: '18%',\r\n phone: '12%',\r\n lastActivity: '20%',\r\n delete: '10%',\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n {props.showCreateUserModal && {\r\n setShowUpdateServiceModal(false);\r\n setShowBlackScreen(false);\r\n }}\r\n show={showUpdateServiceModal}\r\n selectedAccount={props.selectedAccount}\r\n currentUser={props.currentUser}\r\n loadUsersAsync={props.loadUsersAsync}\r\n />\r\n )}\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n language: state.shared.language,\r\n theme: state.theme.theme,\r\n usersLoading: state.users.usersLoading,\r\n showBlackScreen: state.shared.showBlackScreen,\r\n currentUser: state.users.user,\r\n accounts: state.accounts.totalAccounts,\r\n showCreateUserModal: state.users.showCreateUserModal,\r\n selectedAccount: state.users.accountSelectedUsersTable,\r\n userTypes: state.users.userTypes,\r\n currentPage: state.users.currentPage,\r\n users: state.users.users,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n loadUsersAsync: (payload) => dispatch(usersActions.loadUsersAsync(payload)),\r\n setShowCreateUserModal: (payload) => dispatch(usersActions.setShowCreateUserModal(payload)),\r\n deleteUserAsync: (idUser, idAccount) => dispatch(usersActions.deleteUserAsync(idUser, idAccount)),\r\n updateUserAsync: (payload) => dispatch(usersActions.updateUserAsync(payload)),\r\n loadUserTypesAsync: () => dispatch(usersActions.loadUserTypesAsync()),\r\n setShowBlackScreen: (payload) => dispatch(sharedActions.setShowBlackScreen(payload)),\r\n setUserServicesSelected: (payload) => dispatch(usersActions.setUserServicesSelected(payload)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(UserTable);","import React from \"react\";\r\n\r\n\r\nconst Pagination = ({ totalPages, currentPage, onPageChange, theme }) => {\r\n return (\r\n | \r\n onSort(\"name\")}>\r\n \r\n Nombre \r\n \r\n | \r\n \r\n onSort(\"area\")}>\r\n \r\n Cargo \r\n \r\n | \r\n \r\n onSort(\"rol\")}>\r\n \r\n Rol \r\n \r\n | \r\n \r\n \r\n \r\n Servicios \r\n | \r\n \r\n \r\n \r\n Correo \r\n | \r\n \r\n \r\n \r\n Teléfono \r\n | \r\n \r\n onSort(\"recordDate\")}>\r\n \r\n Última actividad \r\n \r\n | \r\n {props.currentUser.capabilities?.show_users_admin_view ? (\r\n \r\n \r\n \r\n Eliminar \r\n | \r\n ) : null}\r\n
|---|---|---|---|---|---|---|---|
| \r\n \r\n \r\n | \r\n |||||||
| {userNameTemplate(user)} | \r\n{userAreaTemplate(user)} | \r\n{userRolTemplate(user)} | \r\n{userProjectsTemplate(user)} | \r\n{userEmailTemplate(user)} | \r\n{userPhoneTemplate(user)} | \r\n{userRecordTemplate(user)} | \r\n {props.currentUser.capabilities?.show_users_admin_view && (\r\n{userDeleteTemplate(user)} | \r\n )}\r\n
\r\n \r\n {Array.from({ length: totalPages }, (_, index) => (\r\n \r\n ))} \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Pagination;\r\n","import React, { useState, useRef, useEffect, useMemo } from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport * as servicesActions from \"../../store/actions/Services\";\r\nimport * as usersActions from \"../../store/actions/Users\";\r\n\r\nimport Header from \"../shared/Header\";\r\nimport UserTable from \"./UserTable\";\r\nimport Pagination from \"./UserPagination\";\r\nimport NewUser from './NewUser';\r\nimport InputRounded from '../shared/utilities/InputRounded';\r\nimport Select from \"../shared/utilities/Select\";\r\nimport ContentLoader from \"react-content-loader\";\r\n\r\nconst Users = (props) => {\r\n const {\r\n theme,\r\n language,\r\n users,\r\n currentPage,\r\n totalPages,\r\n setShowCreateUserModal,\r\n totalUsers,\r\n selectedAccount,\r\n setSelectedAccount,\r\n accounts,\r\n loadUsersAsync,\r\n currentUser,\r\n userTypes,\r\n updateUserAsync,\r\n deleteUserAsync,\r\n loadUserTypesAsync,\r\n userServicesSelected,\r\n setUserServicesSelected,\r\n } = props;\r\n\r\n const [searchQuery, setSearchQuery] = useState('');\r\n const [localSelectedAccount, setLocalSelectedAccount] = useState(selectedAccount);\r\n const [sortConfig, setSortConfig] = useState({ field: null, direction: 'asc' });\r\n const invoicesContainerRef = useRef(null);\r\n\r\n useEffect(() => {\r\n if (accounts && accounts.length > 0 && !localSelectedAccount) {\r\n setLocalSelectedAccount(accounts[0].idAccount);\r\n setSelectedAccount(accounts[0].idAccount);\r\n }\r\n }, [accounts, localSelectedAccount, setSelectedAccount]);\r\n\r\n useEffect(() => {\r\n if (localSelectedAccount) {\r\n loadUsersAsync({\r\n id_services: accounts.find(acc => acc.idAccount === localSelectedAccount)?.services.map(service => service.idService) || [],\r\n page: currentPage,\r\n });\r\n }\r\n }, [localSelectedAccount, currentPage, loadUsersAsync, accounts]);\r\n\r\n const sortedUsers = useMemo(() => {\r\n if (!sortConfig.field) return users;\r\n\r\n const sorted = [...users];\r\n sorted.sort((a, b) => {\r\n let valueA = a[sortConfig.field] || '';\r\n let valueB = b[sortConfig.field] || '';\r\n\r\n if (sortConfig.field === 'rol') {\r\n valueA = userTypes.find(ut => ut.idUserType === a.idUserType)?.description || '';\r\n valueB = userTypes.find(ut => ut.idUserType === b.idUserType)?.description || '';\r\n }\r\n\r\n valueA = valueA.toString().toLowerCase();\r\n valueB = valueB.toString().toLowerCase();\r\n\r\n return sortConfig.direction === 'asc'\r\n ? valueA.localeCompare(valueB)\r\n : valueB.localeCompare(valueA);\r\n });\r\n return sorted;\r\n }, [users, sortConfig, userTypes]);\r\n\r\n const filteredUsers = useMemo(() => {\r\n if (!searchQuery) return sortedUsers;\r\n const lowerQuery = searchQuery.toLowerCase();\r\n return sortedUsers.filter(user =>\r\n (user.name?.toLowerCase() || \"\").includes(lowerQuery) ||\r\n (user.email?.toLowerCase() || \"\").includes(lowerQuery) ||\r\n (user.phone?.toLowerCase() || \"\").includes(lowerQuery)\r\n );\r\n }, [sortedUsers, searchQuery]);\r\n\r\n const openNewUser = () => {\r\n setShowCreateUserModal(true);\r\n };\r\n\r\n const handleSearchChange = (e) => {\r\n setSearchQuery(e.target.value);\r\n };\r\n\r\n const handlePageChange = (newPage) => {\r\n props.setCurrentPageUsers(newPage);\r\n };\r\n\r\n const handleSort = (field) => {\r\n setSortConfig(prev => ({\r\n field,\r\n direction: prev.field === field && prev.direction === 'asc' ? 'desc' : 'asc'\r\n }));\r\n };\r\n const [localLoading, setLocalLoading] = useState(false);\r\n useEffect(() => {\r\n if (localSelectedAccount) {\r\n setLocalLoading(true);\r\n loadUsersAsync({\r\n id_services: accounts.find(acc => acc.idAccount === localSelectedAccount)?.services.map(service => service.idService) || [],\r\n page: currentPage,\r\n }).finally(() => {\r\n setLocalLoading(false);\r\n });\r\n }\r\n }, [localSelectedAccount, currentPage, loadUsersAsync, accounts]);\r\n return (\r\n \r\n
\r\n {language.users_description_header}
\r\n\r\n
\r\n \r\n
\r\n {localLoading || totalPages < 1\r\n ? (\r\n \r\n
\r\n \r\n
\r\n \r\n ({ label: acc.name, value: acc.idAccount })) : []}\r\n onChange={(value) => {\r\n setLocalSelectedAccount(value);\r\n setSelectedAccount(value);\r\n }}\r\n background='surface-bg-surface'\r\n width={'40vh'}\r\n height={150}\r\n />\r\n
\r\n \r\n {totalUsers ? `${totalUsers} usuarios` : null}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n : (\r\n \r\n \r\n
\r\n \r\n
\r\n )}\r\n \r\n {!item.image_url ?\r\n 
\r\n \r\n }\r\n
\r\n );\r\n };\r\n\r\n const RenderWidgetsEmpty = () => {\r\n return (\r\n \r\n
:\r\n {track('Widget opened', {Widget_ID: `${item.amplitude_event}`})}}>\r\n {`${props.language[item.title]}`.replace('#VALUE', item.value_title ?? '')}
\r\n \r\n {item.icon !== null &&
\r\n {item.value}
\r\n \r\n {item.icon_text !== null &&
\r\n {`${props.language[item.text]}`.replace('#VALUE', item.value_text ?? '')}
\r\n \r\n 
\r\n
\r\n )\r\n };\r\n\r\n return (\r\n {props.language.energy_widgets_empty_data}
\r\n \r\n track('Widget clicked', {Widget_Back: 'activate'})}\r\n >\r\n \r\n
\r\n \r\n \r\n \r\n {props.indicators.length ?\r\n = 1400 ? 3 : 2}\r\n navigation={{ nextEl: \"#next-slide\", prevEl: \"#prev-slide\" }}>\r\n {orderData(props.indicators, activeServicesEnergy.some(s => s.type.name === \"energy\") ? bannersData : []).map((card, i) =>\r\n \r\n )}\r\n :\r\n = 1400 ? 3 : 2}\r\n navigation={{ nextEl: \"#next-slide\", prevEl: \"#prev-slide\" }}>\r\n {[0, 1, 2].map((i) =>\r\n \r\n )}\r\n \r\n }\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n })}\r\n \r\n {graphData.map((_graph) => {\r\n const isSelected =\r\n graphActiveTemporal.findIndex((i) => i === _graph.value) >= 0;\r\n\r\n return (\r\n {\r\n if (isSelected && graphActiveTemporal.length > 0) {\r\n setGraphActiveTemporal([\r\n ...graphActiveTemporal.filter(\r\n (g) => g !== _graph.value,\r\n ),\r\n ]);\r\n } else {\r\n setGraphActiveTemporal([\r\n ...graphActiveTemporal,\r\n _graph.value,\r\n ]);\r\n track(\"Graphic variable selected\", {\r\n Variable_ID: _graph.value,\r\n });\r\n }\r\n }}\r\n >\r\n \r\n {\r\n language[\r\n `energy_graph_label_${_graph.value.toLowerCase()}`\r\n ]\r\n }{\" \"}\r\n {_graph.unit && `(${_graph.unit})`}\r\n
\r\n \r\n \r\n {\r\n if (graphGroup?.group === \"AVERAGE\") {\r\n props.setEnableAverageLine(!props.enableAverageLine);\r\n props.setShowBlackScreen(false);\r\n setShow(false);\r\n setFocus(false);\r\n }\r\n if (isDisabled) return;\r\n /* Single Graph */\r\n if (graphGroup.graphData.length === 1) {\r\n if (isSelected) {\r\n props.setGraphActive([\r\n ...activeGraphs.filter(\r\n (g) => g !== graphGroup.graphData[0].value,\r\n ),\r\n ]);\r\n } else {\r\n props.setGraphActive([\r\n ...activeGraphs,\r\n graphGroup.graphData[0].value,\r\n ]);\r\n track(\"Graphic variable selected\", {\r\n Variable_ID: graphGroup.graphData[0].value,\r\n });\r\n }\r\n }\r\n }}\r\n >\r\n {isDisabled ? (\r\n {`${\r\n language[\r\n `energy_graph_group_${graphGroup.group?.toLowerCase()}`\r\n ]\r\n } ${language.tooltip_graph_energy_no_match} ${\r\n language[\r\n `energy_graph_label_${selectedGraphs[0]?.toLowerCase()}`\r\n ]\r\n } ${\r\n language.tooltip_graph_energy_no_match_reason\r\n }`}\r\n }\r\n >\r\n \r\n {\r\n language[\r\n `energy_graph_group_${graphGroup.group?.toLowerCase()}`\r\n ]\r\n }{\" \"}\r\n {graphGroup.graphData[0]?.unit !== \"\" &&\r\n ` (${graphGroup.graphData[0].unit})`}\r\n
\r\n \r\n ) : (\r\n \r\n
\r\n \r\n \r\n setSearch(target.value)}\r\n />\r\n
\r\n \r\n {language.energy_graph_type_disclaimer}\r\n
\r\n {graphGroups.map((graphGroup, index) => {\r\n let isSelected;\r\n let isDisabled;\r\n let graphSelectedCount = 0;\r\n\r\n for (const _graphData of graphGroup.graphData) {\r\n if (activeGraphs.includes(_graphData.value)) {\r\n isSelected = true;\r\n graphSelectedCount++;\r\n } else if (\r\n disbaledGraphs.includes(_graphData.value) &&\r\n graphSelectedCount === 0\r\n ) {\r\n isDisabled = true;\r\n }\r\n }\r\n\r\n if (graphGroup?.group === \"AVERAGE\" && props.enableAverageLine) {\r\n isSelected = true;\r\n }\r\n\r\n if (\r\n graphGroup?.group === \"PREDICTION_ACTIVE_ENERGY\" &&\r\n (activeGraphs.length > 1 || activeServicesEnergy.length > 1)\r\n ) {\r\n isDisabled = true;\r\n }\r\n\r\n return (\r\n \r\n {graphSelectedCount !== 0 &&\r\n graphGroup.graphData.length > 1 && (\r\n \r\n
\r\n )}\r\n {graphGroup.graphData.length > 1 ? (\r\n {graphSelectedCount}
\r\n\r\n {graphIntervalData.length ? (\r\n
\r\n ) : null}\r\n \r\n }>\r\n \r\n \r\n )\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n intervalGraph: state.energy.intervalGraph,\r\n language: state.shared.language,\r\n graphPeriodPicker: state.shared.startOnboarding.graph_period_picker,\r\n showPulseAnimation: state.shared.showPulseAnimation,\r\n activeServicesEnergy: state.services.activeServicesEnergy,\r\n activeGraphs: state.energy.activeGraphs,\r\n theme: state.theme.theme,\r\n})\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n setIntervalGraph: (payload) => dispatch(energyActions.setIntervalGraph(payload)),\r\n setShowBlackScreen: (payload) => dispatch(sharedActions.setShowBlackScreen(payload)),\r\n setControlledOnboarding: (payload) => dispatch(sharedActions.setControlledOnboarding(payload)),\r\n setGraphloading: (payload) => dispatch(energyActions.setGraphloading(payload)),\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GraphPeriodPicker)\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport moment from \"moment-timezone\";\r\n\r\nimport CurrencyFormat from 'react-currency-format';\r\n\r\nconst formatDateLabel = (intervalGraph, domain, lang) => {\r\n let dateFormated;\r\n let intervalLeft;\r\n let intervalRight;\r\n moment.locale(lang);\r\n switch (intervalGraph) {\r\n case 0:\r\n dateFormated = moment\r\n .utc(domain?.x[1] * 1000)\r\n .tz(\"America/Bogota\")\r\n .format(\"DD MMMM YYYY\");\r\n break;\r\n case 1:\r\n case 2:\r\n intervalLeft = moment.utc((domain?.x[0] + 86400) * 1000).format(\"MMM DD\");\r\n intervalRight = moment.utc(domain?.x[1] * 1000).format(\"MMM DD\");\r\n dateFormated = `${intervalLeft} ${lang === 'es' ? 'a' : '-'} ${intervalRight}`;\r\n break;\r\n case 3:\r\n intervalLeft = moment.utc((domain?.x[0] + 2592000) * 1000).format(\"MMM YYYY\");\r\n intervalRight = moment.utc(domain?.x[1] * 1000).format(\"MMM YYYY\");\r\n dateFormated = `${intervalLeft} ${lang === 'es' ? 'a' : '-'} ${intervalRight}`;\r\n break;\r\n default:\r\n dateFormated = \"\";\r\n break;\r\n }\r\n return dateFormated;\r\n};\r\n\r\nconst GraphIndicators = (props) => {\r\n\r\n let data = props.data;\r\n let domain = props.domain;\r\n let activeGraphs = props.activeGraphs;\r\n let language = props.language;\r\n let theme = props.theme;\r\n let intervalGraph = props.intervalGraph;\r\n\r\n const [indexes, setIndexes] = useState({ tot: 0, max: 0, avg: 0, min: 0, unit: \"\" });\r\n const [showIndexes, setShowIndexes] = useState(true);\r\n\r\n useEffect(() => {\r\n const handlerIndexes = () => {\r\n let tot;\r\n let min;\r\n let max;\r\n let avg;\r\n let unit;\r\n let array = [];\r\n\r\n if (data.length === 1 && data[0]?.data.length) {\r\n\r\n const keys = [];\r\n const uniqueArray = [];\r\n const dataFiltered = data.map((value) => value.data.filter((value) => value.y > 0 && value?.x_sec > domain?.x[0] && value?.x_sec <= domain?.x[1]));\r\n dataFiltered[0].forEach(item => {\r\n if (!keys.includes(item?.x_sec)) {\r\n uniqueArray.push(item);\r\n keys.push(item?.x_sec);\r\n }\r\n })\r\n\r\n array = uniqueArray.map((value) => value.y).reduce((a, b) => a.concat(b), []);\r\n\r\n unit = data[0].data[0].unit;\r\n\r\n if (array.length) {\r\n tot = array.reduce((prev, curr) => (curr += prev)).toFixed(2);\r\n min = Math.min(...array).toFixed(2);\r\n max = Math.max(...array).toFixed(2);\r\n avg = (tot / array.length).toFixed(2);\r\n\r\n setIndexes({ tot, max, avg, min, unit });\r\n\r\n setShowIndexes(true);\r\n\r\n return;\r\n }\r\n } else {\r\n setShowIndexes(false);\r\n }\r\n };\r\n\r\n handlerIndexes();\r\n }, [data, domain]);\r\n\r\n const capitalizedText = (text) => {\r\n let label = \"\";\r\n var phrase = text.toLowerCase().split(\" \");\r\n\r\n for (var i = 0; i < phrase.length; i++) {\r\n if (i !== 2) {\r\n phrase[i] = phrase[i].charAt(0).toUpperCase() + phrase[i].substring(1);\r\n }\r\n }\r\n\r\n label = phrase.join(\" \");\r\n\r\n return label;\r\n };\r\n\r\n return (\r\n showIndexes && (\r\n \r\n {graphIntervalData.map((item) => {\r\n let isSelected\r\n isSelected = props.intervalGraph === item[\"interval\"]\r\n\r\n return (\r\n
\r\n )\r\n })}\r\n {\r\n if(!activeGraphs.includes('REACTIVE_CAPACITIVE_EXCESS_ENERGY')){\r\n changePeriod(item[\"interval\"]) \r\n track('Rank selected', {Rank_ID: item['eventProperty'], Project_Type: props.activeServicesEnergy.map(function (service) { return service?.type?.name })})\r\n } \r\n }}>\r\n
\r\n \r\n \r\n
\r\n }\r\n button={\r\n \r\n
\r\n \r\n
\r\n {language[item.labelDescription]}
\r\n\r\n
\r\n }\r\n theme={theme}\r\n />\r\n {language[item.labelName]}
\r\n \r\n \r\n
\r\n )\r\n );\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n graphData: state.energy.graphData,\r\n language: state.shared.language,\r\n activeGraphs: state.energy.activeGraphs,\r\n theme: state.theme.theme,\r\n intervalGraph: state.energy.intervalGraph,\r\n});\r\n\r\nexport default connect(mapStateToProps)(GraphIndicators);\r\n","import React, { useState } from \"react\"\r\nimport { DateRange } from \"react-date-range\"\r\nimport { es, enUS, pt } from \"react-date-range/dist/locale\"\r\nimport \"react-date-range/dist/styles.css\" // main css file\r\nimport \"react-date-range/dist/theme/default.css\" // theme css file\r\n\r\nimport { Transition } from \"react-transition-group\"\r\n\r\nimport { startOfToday, startOfWeek, endOfWeek, isDate, isSameWeek } from \"date-fns\"\r\n\r\nimport { calendarIntervals, setCalendarDates, setCalendarDatesEnergy } from \"../../../services/CalendarHandler\"\r\nimport { Calendar } from \"react-calendar\"\r\n\r\nconst defaultRangeDate = [\r\n {\r\n id: 1,\r\n interval: 1,\r\n labelName: \"energy_graph_calendar_week_range\",\r\n },\r\n {\r\n id: 2,\r\n interval: 2,\r\n labelName: \"energy_graph_calendar_month_range\",\r\n },\r\n]\r\n\r\nconst CalendarRangePicker = (props) => {\r\n const [previewDates, setPreviewDates] = useState({ startDate: null, endDate: null })\r\n\r\n let show = props.show\r\n let setShow = props.setShow\r\n let interval = props.interval\r\n let setDates = props.setDates\r\n let setIntervalGraph = props.setIntervalGraph\r\n let dateRangeEnergy = props.dateRangeEnergy\r\n let language = props.language\r\n let theme = props.theme\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n {capitalizedText(formatDateLabel(props.intervalGraph, props.domain, language.language_locale))}
\r\n \r\n
\r\n \r\n \r\n
\r\n {activeGraphs?.includes(\"PANEL_TEMP\") || activeGraphs?.includes(\"ENVIRONMENT_TEMP\")?\r\n \r\n
:\r\n {props.language.energy_graph_indicator_min} {language[`energy_graph_label_${activeGraphs[0]?.toLowerCase()}`]}
\r\n\r\n {value} {indexes.unit}\r\n
} \r\n />\r\n\r\n
}\r\n {props.language.energy_graph_indicator_total} {language[`energy_graph_label_${activeGraphs[0]?.toLowerCase()}`]}
\r\n\r\n {value} {intervalGraph === 0 && (activeGraphs[0] === \"IRRADIANCE\" || activeGraphs[0] === \"IRRADIANCE_GEN\") ? props.language.energy_graph_unit_irradiance : indexes.unit}\r\n
} \r\n />\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {props.language.energy_graph_indicator_max} {language[`energy_graph_label_${intervalGraph === 0 && (activeGraphs[0] === \"IRRADIANCE\" || activeGraphs[0] === \"IRRADIANCE_GEN\") ? \"irradiance_hourly\" : activeGraphs[0]?.toLowerCase()}`]}\r\n
\r\n\r\n {value} {indexes.unit}\r\n
} \r\n />\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {props.language.energy_graph_indicator_average} {language[`energy_graph_label_${intervalGraph === 0 && (activeGraphs[0] === \"IRRADIANCE\" || activeGraphs[0] === \"IRRADIANCE_GEN\") ? \"irradiance_hourly\" : activeGraphs[0]?.toLowerCase()}`]}\r\n
\r\n\r\n {value} {indexes.unit}\r\n
} \r\n />\r\n\r\n {\r\n setDates(setCalendarDatesEnergy(date.selection, interval))\r\n }}\r\n showSelectionPreview={false}\r\n ranges={dateRangeEnergy}\r\n minDate={new Date(\"2019-07-01T19:21:00.000Z\")}\r\n maxDate={startOfToday()}\r\n showDateDisplay={false}\r\n showPreview={isDate(previewDates.startDate)}\r\n preview={{ startDate: previewDates.startDate, endDate: previewDates.endDate, color: theme === 'dark' ? \"#9ecc14\" : \"#7da60c\" }}\r\n onPreviewChange={(previewDate) => {\r\n if (previewDate === null) return\r\n if (interval === 0) {\r\n setPreviewDates({ startDate: previewDate, endDate: previewDate })\r\n }\r\n if (interval === 1) {\r\n const startDate = startOfWeek(previewDate, { weekStartsOn: 1 })\r\n const endDate = endOfWeek(previewDate, { weekStartsOn: 1 })\r\n const previewDateObject = { startDate, endDate }\r\n setPreviewDates(previewDateObject)\r\n }\r\n }}\r\n />\r\n {interval === 1 && (\r\n
\r\n ) : (\r\n \r\n
\r\n )}\r\n {language.energy_graph_calendar_fast_access}
\r\n\r\n {defaultRangeDate.map((range) => {\r\n const isSelected = range.interval === 1 && isSameWeek(startOfToday(), dateRangeEnergy[0].startDate, { weekStartsOn: 1 })\r\n const lastDates = { startDate: startOfToday(), endDate: startOfToday() }\r\n\r\n return (\r\n {\r\n setIntervalGraph(range.interval)\r\n setDates(setCalendarDatesEnergy(lastDates, range.interval))\r\n }}>\r\n
\r\n {language[range.labelName]}
\r\n \r\n )\r\n })}\r\n\r\n \r\n
\r\n \r\n
}\r\n prevLabel={}\r\n onChange={(value) => {\r\n setDates(setCalendarDates(value, interval))\r\n }}\r\n />\r\n \r\n )}\r\n \r\n )}\r\n
\r\n
\r\n {props.language.energy_export_graph_title}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {props.language.energy_export_graph_start_time}
\r\n \r\n \r\n {state => (\r\n
\r\n setShowCalendarDateFrom(!showCalendarDateFrom) }>\r\n
\r\n \r\n {payloadToExport.startTime ? moment(payloadToExport.startTime).format(\"YYYY-MM-DD\") : props.language.energy_export_graph_select_date}\r\n \r\n
\r\n \r\n }\r\n prevLabel={}\r\n onChange={value => { \r\n setPayloadToExport({ ...payloadToExport, startTime: value });\r\n setShowCalendarDateFrom(false); \r\n }}\r\n />\r\n
\r\n )} \r\n \r\n \r\n
\r\n {props.language.energy_export_graph_end_time}
\r\n \r\n \r\n {state => (\r\n
\r\n setShowCalendarDateTo(!showCalendarDateTo) }>\r\n
\r\n \r\n {payloadToExport.endTime ? moment(payloadToExport.endTime).format(\"YYYY-MM-DD\") : props.language.energy_export_graph_select_date}\r\n \r\n
\r\n \r\n }\r\n prevLabel={}\r\n onChange={value => { \r\n setPayloadToExport({ ...payloadToExport, endTime: value });\r\n setShowCalendarDateTo(false); \r\n }}/>\r\n
\r\n )} \r\n \r\n {props.language.energy_export_graph_filename}
\r\n \r\n setPayloadToExport({ ...payloadToExport, report_name: target?.value })}\r\n error={focus === 1 ? error : \"\"}\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n {progressBars}\r\n
\r\n );\r\n};\r\n\r\nexport default StepProgressBar;\r\n","import React from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport * as sharedActions from '../../../store/actions/Shared';\r\n\r\nimport StepProgressBar from \"./StepProgressBar\";\r\n\r\nimport { track } from \"@amplitude/analytics-browser\";\r\n\r\nconst Tooltip = ({\r\n continuous,\r\n index,\r\n step,\r\n backProps,\r\n closeProps,\r\n primaryProps,\r\n tooltipProps,\r\n isLastStep,\r\n skipProps,\r\n language,\r\n theme,\r\n setShowDrawerOnboarding \r\n}) => {\r\n const { onClick: backClickHandler, ...otherBackProps } = backProps;\r\n const { onClick: nextClickHandler, ...otherNextProps } = primaryProps;\r\n const { onClick: closeClickHandler, ...otherCloseProps } = closeProps;\r\n\r\n const handleBackClick = (event) => {\r\n track('Onboarding back clicked');\r\n\r\n if (backClickHandler) {\r\n backClickHandler(event);\r\n }\r\n };\r\n\r\n const handleNextClick = (event) => {\r\n\r\n if (index === 0) track('Onboarding begin clicked')\r\n else track('Onboarding next clicked')\r\n\r\n if (nextClickHandler) {\r\n nextClickHandler(event);\r\n }\r\n };\r\n\r\n const handleCloseClick = (event) => {\r\n\r\n setShowDrawerOnboarding(true);\r\n\r\n if (closeClickHandler) {\r\n closeClickHandler(event);\r\n }\r\n }; \r\n\r\n const tourViewed = window.localStorage.getItem(\"main-tutorial\");\r\n \r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n language: state.shared.language,\r\n theme: state.theme.theme \r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({ \r\n setShowDrawerOnboarding: (payload) => dispatch(sharedActions.setShowDrawerOnboarding(payload)) \r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Tooltip);","import React, { useCallback, useEffect, useMemo, useState } from \"react\";\r\n\r\nimport Joyride, { ACTIONS, EVENTS, STATUS } from \"react-joyride\";\r\n\r\nimport Tooltip from \"../utils/TooltipCustom\";\r\n\r\nimport { track } from \"@amplitude/analytics-browser\";\r\n\r\nconst joyrideStyles = {\r\n options: {\r\n arrowColor: '#1f1f20',\r\n overlayColor: 'rgba(0, 0, 0, 0.8)',\r\n zIndex: 10000\r\n },\r\n};\r\n\r\nexport default function useTour(props) {\r\n const {\r\n steps,\r\n localStorageKey,\r\n isOpenDrawer,\r\n controlledOnboarding = null,\r\n setShowPulseAnimation = null,\r\n //setControlledOnboarding, \r\n runTour,\r\n setRunTour,\r\n key,\r\n onTourFinish,\r\n } = props;\r\n const [run, setRun] = useState(false);\r\n const [stepIndex, setStepIndex] = useState(0);\r\n const [stepIndexControlled, setStepIndexControlled] = useState(0);\r\n\r\n useEffect(\r\n function () { \r\n const tourViewed = window.localStorage.getItem(localStorageKey); \r\n if (tourViewed === 'delivered') { \r\n return;\r\n }\r\n window.localStorage.setItem(localStorageKey, \"show\");\r\n if (isOpenDrawer === null) { setRun(true); }\r\n },\r\n [localStorageKey, isOpenDrawer]\r\n );\r\n\r\n useEffect(\r\n function () {\r\n const tourViewed = window.localStorage.getItem(localStorageKey);\r\n\r\n if (isOpenDrawer && tourViewed === 'show') {\r\n if (setRunTour && key) {\r\n if (key === 'new_user' || key === 'new_alert') {\r\n setTimeout(() => {\r\n setRunTour({ key: key, value: true });\r\n }, 500);\r\n } else {\r\n setRunTour({ key: key, value: true });\r\n }\r\n }\r\n return;\r\n };\r\n },\r\n [localStorageKey, isOpenDrawer, setRunTour, key]\r\n );\r\n\r\n useEffect(\r\n function () {\r\n if (controlledOnboarding) {\r\n setRun(false);\r\n setStepIndex(stepIndex + 1);\r\n setStepIndexControlled(stepIndex + 1);\r\n }\r\n },\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n [controlledOnboarding]\r\n );\r\n\r\n useEffect(() => {\r\n if (runTour) {\r\n setRun(true);\r\n }\r\n }, [runTour]); \r\n\r\n const handleJoyrideCallback = useCallback(function (data) { \r\n const { action, index, type, status } = data;\r\n const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED]; \r\n\r\n if (data.step?.pulseEffect) {\r\n if (setShowPulseAnimation) {\r\n setShowPulseAnimation(true);\r\n }\r\n } else {\r\n if (setShowPulseAnimation) {\r\n setShowPulseAnimation(false);\r\n }\r\n }\r\n\r\n if (finishedStatuses.includes(status)) {\r\n\r\n setRun(false);\r\n setStepIndex(0);\r\n\r\n if (onTourFinish && status !== 'skipped') {\r\n const tourViewed = window.localStorage.getItem(localStorageKey);\r\n if (tourViewed !== 'delivered') { onTourFinish() }\r\n };\r\n\r\n if (setRunTour && key) setRunTour({ key: key, value: false });\r\n\r\n window.localStorage.setItem(localStorageKey, 'delivered');\r\n\r\n if (status === 'skipped') { \r\n window.localStorage.setItem('main-tutorial', 'delivered');\r\n window.localStorage.setItem('alerts-tutorial', 'delivered');\r\n window.localStorage.setItem('graph-calendar-tour', 'delivered');\r\n window.localStorage.setItem('graph-export-data-tour', 'delivered');\r\n window.localStorage.setItem('graph-period-tour', 'delivered');\r\n window.localStorage.setItem('graph-type-tour', 'delivered');\r\n window.localStorage.setItem('invoice-tutorial', 'delivered');\r\n window.localStorage.setItem('profile-tutorial', 'delivered');\r\n window.localStorage.setItem('service-picker-tutorial', 'delivered');\r\n window.localStorage.setItem('service-tutorial', 'delivered');\r\n window.localStorage.setItem('user-tutorial', 'delivered'); \r\n \r\n if (setRunTour) setRunTour({ key: 'walktrough', value: true });\r\n track('Onboarding skip clicked');\r\n }\r\n\r\n } else if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {\r\n\r\n const nextStepIndex = index + (action === ACTIONS.PREV ? -1 : 1);\r\n\r\n if (controlledOnboarding && index === (stepIndexControlled - 1)) {\r\n setTimeout(() => {\r\n setRun(true);\r\n }, 400);\r\n }\r\n else {\r\n setStepIndex(nextStepIndex);\r\n }\r\n }\r\n }, [controlledOnboarding, localStorageKey, setStepIndex, stepIndexControlled, setRunTour, key, onTourFinish, setShowPulseAnimation]);\r\n\r\n const tour = useMemo(\r\n () => (\r\n \r\n {(!step.walktrough && step.steps > 1) ?
\r\n \r\n
\r\n \r\n
\r\n {step.title}
\r\n{step.description}
\r\n{step.content}
\r\n \r\n {!isLastStep &&
\r\n {language.tutorial_skip_button}
}\r\n {step.walktrough && handleCloseClick(event)} className={`label-small-special-underline content-default-secondary pe-pointer ${theme}`} {...otherCloseProps}>{language.onboarding_modal_label_redirection}
}\r\n {!step?.hideFooter ?\r\n \r\n {index > 0 && !step?.hideBackButton && (\r\n
:\r\n null}\r\n handleBackClick(event)} className={`row-center align-items-center rounded-pill surface-bg-on-surface-alpha border-fill-medium me-2 px-${index === 0 ? 4 : 2} ${theme}`} style={{height: 32, minWidth: 32}} {...otherBackProps}>\r\n \r\n
\r\n )}\r\n {continuous && !isLastStep && (\r\n handleNextClick(event)} className={`row-center align-items-center rounded-pill surface-bg-on-surface-alpha border-fill-medium px-${index === 0 ? 4 : 2} ${theme}`} style={{height: 32, minWidth: 32}} {...otherNextProps}>\r\n {index === 0 &&
\r\n )} \r\n {isLastStep && (\r\n {language.tutorial_start_button}
}\r\n \r\n handleNextClick(event)} className={`row-center align-items-center surface-bg-on-surface-alpha border-fill-medium rounded-pill ${tourViewed !== 'show' ? 'px-4' : 'px-2'} ${theme}`} style={{height: 32, minWidth: 32}} {...otherNextProps}>\r\n {step.walktrough ? \r\n
\r\n )}\r\n {language.tutorial_got_it}
: \r\n\r\n {tourViewed !== 'show' ?
\r\n }\r\n {language.onboarding_modal_finally}
: null}\r\n \r\n\r\n \r\n
,\r\n title: language.onboarding_graph_type_title_step1,\r\n description: language.onboarding_graph_type_description_step1,\r\n placement: \"auto\", \r\n target: \"#graph_picker\",\r\n disableBeacon: true,\r\n steps: 2, \r\n }, \r\n {\r\n content:\r\n \r\n \r\n
,\r\n title: language.onboarding_graph_type_title_step2,\r\n description: language.onboarding_graph_type_description_step2,\r\n placement: \"auto\", \r\n target: \"#graph_picker\",\r\n disableBeacon: true,\r\n steps: 2, \r\n } \r\n ])\r\n};","import React from \"react\"\r\n\r\nimport ThemedImage from \"../utils/ThemedImage\"\r\n\r\nexport const stepsGraphPeriod = (language) => {\r\n return ([\r\n {\r\n content: (\r\n \r\n \r\n
\r\n ),\r\n title: language.onboarding_graph_period_title_step1,\r\n description: language.onboarding_graph_period_description_step1,\r\n placement: \"auto\", \r\n target: \"#date_range_picker\",\r\n disableBeacon: true,\r\n steps: 5,\r\n disableOverlayClose: true,\r\n spotlightClicks: true,\r\n hideFooter: true,\r\n hideFooterTitle: \"Haz click en el botón!\",\r\n pulseEffect: true\r\n },\r\n { \r\n title: language.onboarding_graph_period_title_step2,\r\n description: language.onboarding_graph_period_description_step2,\r\n placement: \"auto\",\r\n target: \"#date_interval\",\r\n disableBeacon: true,\r\n steps: 5,\r\n disableOverlayClose: true,\r\n hideBackButton: true,\r\n },\r\n { \r\n title: language.onboarding_graph_period_title_step3,\r\n description: language.onboarding_graph_period_description_step3,\r\n placement: \"auto\",\r\n target: \"#date_interval\",\r\n disableBeacon: true,\r\n steps: 5,\r\n disableOverlayClose: true,\r\n },\r\n { \r\n title: language.onboarding_graph_period_title_step4,\r\n description: language.onboarding_graph_period_description_step4,\r\n placement: \"auto\", \r\n target: \"#date_interval\",\r\n disableBeacon: true,\r\n steps: 5,\r\n disableOverlayClose: true,\r\n },\r\n { \r\n title: language.onboarding_graph_period_title_step5,\r\n description: language.onboarding_graph_period_description_step5,\r\n placement: \"auto\",\r\n target: \"#date_interval\",\r\n disableBeacon: true,\r\n steps: 5,\r\n disableOverlayClose: true,\r\n },\r\n ])\r\n}\r\n","import React from 'react';\r\n\r\nimport ThemedImage from '../utils/ThemedImage';\r\n\r\nexport const stepsGraphCalendar = (language) => {\r\n return ([\r\n {\r\n content:\r\n \r\n \r\n
,\r\n title: language.onboarding_graph_calendar_title_step1,\r\n description: language.onboarding_graph_calendar_description_step1,\r\n placement: \"auto\",\r\n target: \"#date_calendar_picker\",\r\n disableBeacon: true,\r\n steps: 1 \r\n } \r\n ])\r\n};","import React from \"react\"\r\n\r\nexport const stepsGraphExportData = (language, theme) => {\r\n return ([\r\n { \r\n content: (\r\n \r\n
\r\n ),\r\n title: language.onboarding_graph_export_data_title_step1,\r\n description: language.onboarding_graph_export_data_description_step1,\r\n placement: \"auto\", \r\n target: \"#export_data_picker\",\r\n disableBeacon: true,\r\n steps: 1 \r\n } \r\n ])\r\n}\r\n","import React, { Fragment, useEffect, useRef, useState } from \"react\"\r\nimport { connect } from \"react-redux\"\r\n\r\nimport * as energyActions from \"../../../store/actions/Energy\"\r\nimport * as sharedActions from \"../../../store/actions/Shared\"\r\n\r\nimport _ from \"lodash\"\r\n// import { Animation } from \"rsuite\"\r\nimport { track } from \"@amplitude/analytics-browser\"\r\n\r\nimport { Transition } from \"react-transition-group\"\r\n\r\nimport { Loader } from \"rsuite\"\r\n\r\nimport { VictoryChart, VictoryGroup, VictoryAxis, createContainer, VictoryBar, VictoryLabel, VictoryTooltip, VictoryArea, Rect } from \"victory\"\r\n\r\nimport moment from \"moment-timezone\"\r\nimport { addDays, parse, startOfWeek, startOfMonth, addMonths, startOfYear, addYears } from \"date-fns\"\r\n\r\nimport CurrencyFormat from 'react-currency-format';\r\n\r\nimport GraphTypePicker from \"./GraphTypePicker\"\r\nimport GraphPeriodPicker from \"./GraphPeriodPicker\"\r\nimport GraphIndicators from \"./GraphIndicators\"\r\nimport ExtraItemsPopover from \"../../genius/ExtraItemsPopover\"\r\nimport CalendarGraphEnergy from \"../../shared/utilities/CalendarGraphEnergy\"\r\nimport ButtonCircle from \"../../shared/utilities/ButtonCircle\"\r\nimport ExportGraph from \"./ExportGraph\"\r\n\r\nimport empty_graph_energy from \"../../../imgs/empty-graph-energy.svg\"\r\nimport empty_graph_energy_light from \"../../../imgs/empty-graph-energy-light.svg\"\r\n\r\nimport { setGraphLabel } from \"../../../services/GraphsHandler\"\r\n\r\nimport { useWindowSize } from \"../../shared/utilities/useWindowSize\"\r\nimport { colors, gradients, barStyles, linearStyles, grid, tickLabelsX, tickLabelsY, tickStyle } from \"../../shared/svgs/GraphStyles\"\r\n\r\nimport useTour from '../../onboarding/hook/useTour';\r\nimport { stepsGraphType } from '../../onboarding/steps/GraphTypeSteps';\r\nimport { stepsGraphPeriod } from \"../../onboarding/steps/GraphPeriodSteps\";\r\nimport { stepsGraphCalendar } from \"../../onboarding/steps/GraphCalendarSteps\";\r\nimport { stepsGraphExportData } from \"../../onboarding/steps/GraphExportDataSteps\"\r\n\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nconst VictoryZoomVoronoiContainer = createContainer(\"zoom\", \"voronoi\")\r\n\r\n\r\nconst graphLoadingContainer = (loading, language) => (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n {(state) => (\r\n \r\n
\r\n)\r\n\r\n\r\nconst formatDateLabel = (intervalGraph, domain, lang) => {\r\n let dateFormated\r\n let intervalLeft\r\n let intervalRight\r\n moment.locale(lang)\r\n switch (intervalGraph) {\r\n case 0:\r\n dateFormated = moment\r\n .utc(domain?.x[1] * 1000)\r\n .tz(\"America/Bogota\")\r\n .format(\"DD MMMM YYYY\")\r\n break\r\n case 1:\r\n case 2:\r\n intervalLeft = moment.utc((domain?.x[0] + 86400) * 1000).format(\"MMM DD\")\r\n intervalRight = moment.utc(domain?.x[1] * 1000).format(\"MMM DD\")\r\n dateFormated = `${intervalLeft} ${lang === 'es' ? 'a' : '-'} ${intervalRight}`\r\n break\r\n case 3:\r\n intervalLeft = moment.utc((domain?.x[0] + 2592000) * 1000).format(\"MMM YYYY\")\r\n intervalRight = moment.utc(domain?.x[1] * 1000).format(\"MMM YYYY\")\r\n dateFormated = `${intervalLeft} ${lang === 'es' ? 'a' : '-'} ${intervalRight}`\r\n break\r\n default:\r\n dateFormated = \"\"\r\n break\r\n }\r\n return dateFormated\r\n}\r\n\r\nconst handlerFormatAxis = (date, type, lang, zoomContainer = false, title = false, sampled = false) => {\r\n let stringFormats\r\n\r\n switch (type) {\r\n case 0:\r\n stringFormats = [\"hh:mm DD/MM/YY\", \"HH\", \"dddd, DD MMMM YYYY\", \"HH:mm\"]\r\n break\r\n case 1:\r\n case 2:\r\n stringFormats = [\"DD/MM/YY\", \"ddd, DD\", \"MMMM YYYY\"]\r\n break\r\n case 3:\r\n stringFormats = [\"MMM, YY\", \"MMM\", \"YYYY\"]\r\n break\r\n default:\r\n break\r\n }\r\n if (zoomContainer) {\r\n moment.locale(lang)\r\n return parseInt(moment(date, stringFormats[0]).unix())\r\n } else {\r\n moment.locale(lang)\r\n return moment.utc(date * 1000).format(stringFormats[title ? 2 : sampled && type === 0 ? 3 : 1])\r\n }\r\n}\r\n\r\n\r\nconst getNextMonth = (date, left, interval, lang, sampled = false, sampledTime = 0) => {\r\n moment.locale(lang);\r\n let dateObject = moment.utc(date);\r\n switch (interval) {\r\n case 0:\r\n const day = left ? dateObject.subtract(1, 'days') : dateObject.add(1, 'days');\r\n const firstHour = day.startOf('day').unix() - 1800;\r\n const lastHour = day.endOf('day').unix() - 1800;\r\n if (sampled) {\r\n if (left) {\r\n return { x: [(date / 1000) - (36 * sampledTime * 2), (date / 1000) - (36 * sampledTime)]}\r\n }\r\n else {\r\n return { x: [(date / 1000), (date / 1000) + (36 * sampledTime)]}\r\n }\r\n }\r\n return { x: [firstHour, lastHour] };\r\n case 1:\r\n const week = left ? dateObject.subtract(1, 'weeks') : dateObject.add(1, 'weeks');\r\n const firstDay = week.startOf('isoWeek').unix() - 43200;\r\n const lastDay = week.endOf('isoWeek').unix() - 86400 * 0.5;\r\n return { x: [firstDay, lastDay] };\r\n case 2:\r\n const month = left ? dateObject.subtract(1, 'months') : dateObject.add(1, 'months');\r\n const firstDayMonth = month.startOf('month').unix() - 43200;\r\n const lastDayMonth = month.endOf('month').unix() - 43200;\r\n return { x: [firstDayMonth, lastDayMonth] };\r\n default:\r\n break;\r\n }\r\n}\r\n\r\nconst getBarWidth = (intervalGraph, numOfGraphsSelected) => {\r\n switch (intervalGraph) {\r\n case 0:\r\n return 20\r\n case 1:\r\n if (numOfGraphsSelected === 1) {\r\n return 60\r\n } else if (numOfGraphsSelected < 4) {\r\n return 40\r\n } else if (numOfGraphsSelected === 4) {\r\n return 25\r\n } else {\r\n return 15\r\n }\r\n case 2:\r\n if (numOfGraphsSelected === 1) {\r\n return 20\r\n } else if (numOfGraphsSelected === 2) {\r\n return 12\r\n } else {\r\n return 10\r\n }\r\n case 3:\r\n if (numOfGraphsSelected <= 2) {\r\n return 35\r\n } else if (numOfGraphsSelected > 2 || numOfGraphsSelected <= 4) {\r\n return 20\r\n } else {\r\n return 15\r\n }\r\n default:\r\n break\r\n }\r\n}\r\n\r\nconst Graph = (props) => {\r\n\r\n const history = useHistory();\r\n\r\n let graphData = props.graphData\r\n let intervalGraph = props.intervalGraph\r\n let graphDateFrom = props.graphDateFrom\r\n let graphDateTo = props.graphDateTo\r\n let showCalendar = props.showCalendar\r\n let scrollActive = props.scrollActive\r\n let setIntervalGraph = props.setIntervalGraph\r\n //let tariff = props.tariff; \r\n let showReportModal = props.showReportModal\r\n let graphCalendarPicker = props.graphCalendarPicker\r\n let graphExportData = props.graphExportData\r\n let activeServicesPlus = props.activeServicesPlus\r\n let theme = props.theme\r\n\r\n const setShowBlackScreen = props.setShowBlackScreen\r\n const setShowCalendar = props.setShowCalendar\r\n const setScrollActive = props.setScrollActive\r\n const setControlledOnboarding = props.setControlledOnboarding\r\n const setStartOnboarding = props.setStartOnboarding\r\n const loadDetailService = props.loadDetailService\r\n\r\n const size = useWindowSize()\r\n\r\n const numLegendsToShow = size.width > 1400 ? 3 : 2\r\n\r\n const graphContainer = useRef(null)\r\n const graphContainerLoader = useRef(null)\r\n\r\n const maxNormalizeInit = {\r\n GENERATION: 1,\r\n IRRADIANCE: 1,\r\n PR: 100,\r\n POWER_LIMITATION: 100\r\n }\r\n let avgText = props.language.language_locale === \"es\" ? 'Prom' : 'Avg'\r\n\r\n const [emptyData, setEmptyData] = useState(false)\r\n const [graphContainerWidth, setGraphContainerWidth] = useState(0)\r\n const [domain, setDomain] = useState(null)\r\n const [entireDomain, setEntireDomain] = useState(null)\r\n const [data, setData] = useState([])\r\n const [grabbing, setGrabbing] = useState(false)\r\n const [dateRangeEnergy] = useState([\r\n {\r\n startDate: graphDateFrom,\r\n endDate: graphDateTo,\r\n key: \"selection\",\r\n },\r\n ])\r\n const typePickerRef = useRef(null);\r\n const numOfGraphsSelected = data.length\r\n const [openGraphPeriodPicker, setOpenPeriodPicker] = useState(false);\r\n const [maxNormalize, setMaxNormalize] = useState(maxNormalizeInit);\r\n const [loader, setLoader] = useState(true);\r\n const [sampledTime, setSampledTime] = useState(0);\r\n const [heightTypePicker, setHeightTypePicker] = useState(70);\r\n\r\n useEffect(() => { \r\n const sortGraphData = graphData.sort((a, b) => b.data.length - a.data.length);\r\n if (sortGraphData.length) setData(sortGraphData)\r\n // eslint-disable-next-line\r\n }, [graphData])\r\n\r\n useEffect(() => {\r\n if (data.length) {\r\n const dataValues = data[0]?.data\r\n let intervalX = [dataValues[0]?.x_sec, intervalGraph === 3 ? _.last(dataValues)?.x_sec + (new Date().getDate() + 1) * 86400 : _.last(dataValues)?.x_sec]\r\n const frequency = dataValues[1]?.x_sec - dataValues[0]?.x_sec;\r\n setSampledTime(frequency);\r\n setEntireDomain({ x: intervalX })\r\n if (domain === null || isNaN(domain.x[0])) {\r\n setDomain({\r\n x: [\r\n props.activeGraphs?.includes(\"POWER_LIMITATION\") && intervalGraph === 0 ? ((moment().tz(\"America/Bogota\").valueOf() / 1000).toFixed(0)) - 30 * frequency :\r\n intervalX[1] -\r\n (intervalGraph === 0\r\n ? 86400\r\n : intervalGraph === 1\r\n ? 604800 - (numOfGraphsSelected > 9 ? 86400 * (numOfGraphsSelected - 9) : 0)\r\n : intervalGraph === 2\r\n ? 86400 * moment(graphDateFrom)?.daysInMonth() - (numOfGraphsSelected < 3 ? 0 : numOfGraphsSelected === 3 || numOfGraphsSelected === 4 ? 86400 * (numOfGraphsSelected + 1) : numOfGraphsSelected === 5 ? 86400 * (numOfGraphsSelected * 2) : numOfGraphsSelected <= 7 ? 86400 * Math.floor(numOfGraphsSelected * 2.5) : 86400 * 22)\r\n : intervalGraph === 3\r\n ? 31536000 - (numOfGraphsSelected > 3 ? 86400 * moment(graphDateFrom)?.daysInMonth() * (numOfGraphsSelected - 3) : 0)\r\n : 0),\r\n props.activeGraphs?.includes(\"POWER_LIMITATION\") && intervalGraph === 0 ? ((moment().tz(\"America/Bogota\").valueOf() / 1000).toFixed(0)) : intervalX[1],\r\n ],\r\n })\r\n }\r\n }\r\n // eslint-disable-next-line\r\n }, [graphContainerWidth, data, intervalGraph])\r\n\r\n useEffect(() => {\r\n if (graphContainer.current) {\r\n setGraphContainerWidth(graphContainer.current.getBoundingClientRect().width)\r\n }\r\n else {\r\n setGraphContainerWidth(graphContainerLoader.current.getBoundingClientRect().width)\r\n };\r\n if (typePickerRef.current) {\r\n setHeightTypePicker(typePickerRef.current.getBoundingClientRect().height);\r\n }\r\n }, [size, loader]);\r\n\r\n useEffect(() => {\r\n const emptyDataGraph = data.filter((d) => d.data.length === 0)\r\n setEmptyData(emptyDataGraph.length === data.length)\r\n // eslint-disable-next-line\r\n }, [data])\r\n\r\n useEffect(() => {\r\n if (domain) {\r\n const intervalLeft = (domain.x[0] - entireDomain.x[0]) / (intervalGraph === 1 ? 604800 : intervalGraph === 0 ? 86400 : intervalGraph === 2 ? 86400 * 30 : 31536000)\r\n const intervalRight = (entireDomain.x[1] - domain.x[1]) / (intervalGraph === 1 ? 604800 : intervalGraph === 0 ? 86400 : intervalGraph === 2 ? 86400 * 30 : 31536000)\r\n if (intervalLeft < 0.6 && props.enableScrollData) { \r\n props.loadGraphAsync(true, true)\r\n }\r\n if (intervalRight < 0.6 && props.enableScrollData && \r\n entireDomain.x[1] - (handlerFormatAxis(new Date(), intervalGraph, props.language.language_locale, true) + \r\n (props.activeGraphs?.includes('PREDICTION_ACTIVE_ENERGY') && intervalGraph === 0 ? 3600 * 1000 * 24 * 0 : 0)) <= 0) {\r\n props.loadGraphAsync(true, false)\r\n }\r\n }\r\n if (props.activeGraphs?.includes('IRRADIANCE_GEN') || props.activeGraphs?.includes('POWER_LIMITATION')) getMaxNormalize();\r\n // eslint-disable-next-line\r\n }, [domain, props.enableScrollData])\r\n\r\n useEffect(() => {\r\n setShowBlackScreen(showCalendar)\r\n }, [setShowBlackScreen, showCalendar])\r\n\r\n useEffect(() => { setTimeout(() => setLoader(props.graphLoading), 500) }, [props.graphLoading])\r\n\r\n const getMax = (arr) => {\r\n arr = arr.map((value) => value.data.filter((value) => value.y > 0 && value?.x_sec >= domain?.x[0] && value?.x_sec <= domain?.x[1]).map((value) => value.y)).reduce((a, b) => a.concat(b), [])\r\n return Math.max(...arr)\r\n }\r\n\r\n const getMaxNormalize = () => {\r\n if (props.activeGraphs?.includes('IRRADIANCE_GEN')){\r\n let generation = data?.filter(item => item?.value === 'GENERATION');\r\n let irradiance = data?.filter(item => item?.value === 'IRRADIANCE');\r\n generation = generation.map((value) => value.data.filter((value) => value?.x_sec >= domain?.x[0] && value?.x_sec <= domain?.x[1]).map((value) => value.y)).reduce((a, b) => a.concat(b), [])\r\n irradiance = irradiance.map((value) => value.data.filter((value) => value?.x_sec >= domain?.x[0] && value?.x_sec <= domain?.x[1]).map((value) => value.y)).reduce((a, b) => a.concat(b), [])\r\n setMaxNormalize({ ...maxNormalize, GENERATION: generation.length ? Math.max(...generation) : 1, IRRADIANCE: irradiance.length ? Math.max(...irradiance) : 1 });\r\n }\r\n if (props.activeGraphs?.includes('POWER_LIMITATION')){\r\n let generation = data?.filter(item => item?.value === 'GENERATION');\r\n let powerLimitation = data?.filter(item => item?.value === 'POWER_LIMITATION');\r\n generation = generation.map((value) => value.data.filter((value) => value?.x_sec >= domain?.x[0] && value?.x_sec <= domain?.x[1]).map((value) => value.y)).reduce((a, b) => a.concat(b), [])\r\n powerLimitation = powerLimitation.map((value) => value.data.filter((value) => value?.x_sec >= domain?.x[0] && value?.x_sec <= domain?.x[1]).map((value) => value.y)).reduce((a, b) => a.concat(b), [])\r\n setMaxNormalize({ ...maxNormalize, GENERATION: generation.length && powerLimitation.length ? Math.max(...generation.map((x, i) => x / (powerLimitation[i] > 0 ? (powerLimitation[i]/ 100) : 1))) : 1, POWER_LIMITATION: 100 });\r\n }\r\n }\r\n\r\n const handleCalendar = (value) => {\r\n props.setGraphDates(value)\r\n props.loadGraphAsync(false, true)\r\n setShowBlackScreen(false)\r\n setShowCalendar(false)\r\n }\r\n\r\n const RenderEmptyData = () => {\r\n return (\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n {\r\n setShowCalendar(true)\r\n }}>\r\n
\r\n )\r\n }\r\n\r\n const capitalizedText = (text) => {\r\n let label = \"\"\r\n var phrase = text.toLowerCase().split(\" \")\r\n\r\n for (var i = 0; i < phrase.length; i++) {\r\n if (i !== 2) {\r\n phrase[i] = phrase[i].charAt(0).toUpperCase() + phrase[i].substring(1)\r\n }\r\n }\r\n\r\n label = phrase.join(\" \")\r\n\r\n return label\r\n }\r\n\r\n useEffect(() => {\r\n if (showCalendar && graphCalendarPicker) {\r\n setControlledOnboarding({ key: 'graph_calendar_picker', value: true })\r\n } else {\r\n setControlledOnboarding({ key: 'graph_calendar_picker', value: false })\r\n }\r\n }, [showCalendar, setControlledOnboarding, graphCalendarPicker])\r\n\r\n useEffect(() => {\r\n if (showReportModal && graphExportData) {\r\n setControlledOnboarding({ key: 'graph_export_data', value: true })\r\n } else {\r\n setControlledOnboarding({ key: 'graph_export_data', value: false })\r\n }\r\n }, [showReportModal, setControlledOnboarding, graphExportData])\r\n\r\n const tourGraphType = useTour({ steps: stepsGraphType(props.language), localStorageKey: \"graph-type-tour\", isOpenDrawer: !scrollActive, controlledOnboarding: props.controlledTypePicker, setControlledOnboarding: setControlledOnboarding, runTour: props.graphTypePicker, setRunTour: setStartOnboarding, key: 'graph_type_picker', setShowPulseAnimation: props.setShowPulseAnimation });\r\n const tourGraphPeriod = useTour({ steps: stepsGraphPeriod(props.language), localStorageKey: \"graph-period-tour\", isOpenDrawer: openGraphPeriodPicker, controlledOnboarding: props.controlledPeriodPicker, setControlledOnboarding: setControlledOnboarding, runTour: props.graphPeriodPicker, setRunTour: setStartOnboarding, key: 'graph_period_picker', setShowPulseAnimation: props.setShowPulseAnimation });\r\n const tourGraphCalendar = useTour({ steps: stepsGraphCalendar(props.language), localStorageKey: \"graph-calendar-tour\", isOpenDrawer: showCalendar, controlledOnboarding: props.controlledCalendarPicker, setControlledOnboarding: setControlledOnboarding, runTour: props.graphCalendarPicker, setRunTour: setStartOnboarding, key: 'graph_calendar_picker', setShowPulseAnimation: props.setShowPulseAnimation });\r\n const tourGraphExportData = useTour({ steps: stepsGraphExportData(props.language, theme), localStorageKey: \"graph-export-data-tour\", isOpenDrawer: showReportModal, controlledOnboarding: props.controlledExportPicker, setControlledOnboarding: setControlledOnboarding, runTour: props.graphExportData, setRunTour: setStartOnboarding, key: 'graph_export_data', setShowPulseAnimation: props.setShowPulseAnimation });\r\n\r\n const DotSliderLine = ({ scale }) => {\r\n const currentDate = new Date(domain?.x[1] * 1000);\r\n const firstDateMonth = new Date(Date.UTC(currentDate.getUTCFullYear(), currentDate.getUTCMonth(), 1));\r\n const firstDateTimestamp = firstDateMonth?.getTime();\r\n const x = scale.x((firstDateTimestamp / 1000) - (86400 / 2))\r\n return (\r\n {props.language.energy_graph_title_empty_data}
\r\n {props.language.energy_graph_description_empty_data}
\r\n {props.language.energy_graph_empty_data_button}
\r\n \r\n{`${item?.id.split(\"-\").length === 2 ? item?.id.split(\"-\")[0] : item?.id.split(\"-\").slice(0, item?.id.split(\"-\").length - 1).reverse().join(' - ')}`}
\r\n{graphLoadingContainer(loader, props.language)}
:\r\n \r\n {gradients(theme)}\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n }\r\n button={\r\n \r\n {data.slice(0, numLegendsToShow).concat(props.activeGraphs.includes('POWER_LIMITATION') ? [{id: \"Generación nominal\", data: [0]}] : []).map((d, i) => (\r\n \r\n
\r\n }\r\n button={\r\n \r\n
\r\n \r\n
\r\n {setGraphLabel(d?.id)}
\r\n \r\n \r\n
\r\n }\r\n theme={theme}\r\n />\r\n ))}\r\n {data.length > numLegendsToShow && (\r\n {d.data.length ? setGraphLabel(d.id, true) : `${props.language.energy_graph_no_data} - ${setGraphLabel(d?.id, true)}`}
\r\n {props.activeGraphs.length > 1 && props.setGraphActive([...props.activeGraphs.filter((g) => g !== d.value)])}>}\r\n \r\n {data.slice(numLegendsToShow).map((d, i) => {\r\n return (\r\n
\r\n \r\n \r\n
\r\n )\r\n })}\r\n {d.data.length ? setGraphLabel(d.id) : `${props.language.energy_graph_no_data} - ${setGraphLabel(d?.id, true)}`}
\r\n props.setGraphActive([...props.activeGraphs.filter((g) => g !== d.value)])}>\r\n \r\n \r\n
\r\n }\r\n theme={theme}\r\n />\r\n )}\r\n {data.length - numLegendsToShow}
\r\n \r\n
\r\n \r\n
\r\n \r\n {activeServicesPlus.length ? \r\n : null}\r\n setOpenPeriodPicker(value)} />\r\n
\r\n {capitalizedText(formatDateLabel(intervalGraph, domain, props.language.language_locale))}
\r\n \r\n {\r\n setShowCalendar(!showCalendar)\r\n }}\r\n />\r\n
\r\n \r\n {\r\n props.setShowReportModal(true)\r\n }}\r\n />\r\n
\r\n \r\n {props.prevStateBar ? : null}\r\n {emptyData === false && data.length ? (\r\n
\r\n setGrabbing(true)} onMouseUp={() => setGrabbing(false)}>\r\n \r\n {intervalGraph === 3 || (intervalGraph === 2 && numOfGraphsSelected >= 3) || (intervalGraph === 1 && numOfGraphsSelected >= 8) ? null :\r\n \r\n : null\r\n }\r\n {props.activeGraphs.includes('POWER_LIMITATION') ?\r\n \r\n : null\r\n }\r\n {intervalGraph || (props.activeGraphs.length && props.activeGraphs.includes('POWER_LIMITATION')) ? (\r\n {\r\n setScrollActive(false);\r\n setDomain({ x: domainZoom.x });\r\n }}\r\n voronoiDimension=\"x\"\r\n labels={() => ` `}\r\n labelComponent={= 5 ? 20 : intervalGraph === 1 && numOfGraphsSelected === 4 ? 30 : intervalGraph === 3 && numOfGraphsSelected <= 2 ? 45 : intervalGraph === 3 && numOfGraphsSelected > 2 ? 20 : (props.activeGraphs.includes('PREDICTION_ACTIVE_ENERGY') ? 0 : 10)}>\r\n {!(props.activeGraphs.length && (props.activeGraphs.includes('IRRADIANCE_GEN') || props.activeGraphs.includes('POWER_LIMITATION'))) ?\r\n data.map((d, i) => (\r\n valueY?.y}\r\n data={d.data.filter((item) => item?.x_sec >= domain.x[0] && item?.x_sec <= domain.x[1])}\r\n barRatio={d?.value !== 'PREDICTION_ACTIVE_ENERGY' ? 10 : 50}\r\n barWidth={d?.value !== 'PREDICTION_ACTIVE_ENERGY' ? getBarWidth(intervalGraph, numOfGraphsSelected) : getBarWidth(intervalGraph, numOfGraphsSelected) + (intervalGraph === 1 ? 20 : 4)}\r\n /* barWidth={(intervalGraph === 1 && numOfGraphsSelected === 1) ? 60 : intervalGraph === 3 || (intervalGraph === 1 && numOfGraphsSelected > 1) ? 40 : (intervalGraph === 2 && numOfGraphsSelected > 1) ? 12 : 20} */\r\n cornerRadius={{ topRight: 4, topLeft: 4 }}\r\n style={{ data: { \r\n fill: ({ datum }) => (data.length === 1 && datum.y >= getMax(data) ? barStyles(theme)[2].data.fill : d?.value !== 'PREDICTION_ACTIVE_ENERGY' ? barStyles(theme)[i - Math.floor(i / barStyles(theme).length) * barStyles(theme).length].data.fill : '#F5FED6'), \r\n fillOpacity: d?.value !== 'PREDICTION_ACTIVE_ENERGY' ? 1 : 0.2,\r\n stroke: '#cefc34',\r\n strokeWidth: d?.value !== 'PREDICTION_ACTIVE_ENERGY' ? 0 : 1,\r\n strokeDasharray: 4\r\n } }}\r\n events={[\r\n {\r\n target: \"data\",\r\n eventHandlers: {\r\n onMouseOver: () => {\r\n track('Graphicbar hover', { Rank_ID: props.rankGraphId, Project_Type: props.activeServicesEnergy.map(function (service) { return service?.type?.name }) })\r\n return [\r\n {\r\n target: \"data\",\r\n mutation: () => ({ style: barStyles(theme)[barStyles(theme).length - 1].data })\r\n }\r\n ]\r\n },\r\n onMouseOut: () => {\r\n return [\r\n {\r\n target: \"data\",\r\n mutation: () => { },\r\n }\r\n ]\r\n },\r\n onClick: handleBarClick\r\n },\r\n },\r\n ]}\r\n />\r\n )) :\r\n data?.filter(item => props.activeGraphs.includes('IRRADIANCE_GEN') ? item?.value !== 'IRRADIANCE' : item?.value === 'POWER_LIMITATION').map((d, i) => (\r\n valueY?.y / maxNormalize[d?.value]}\r\n data={d.data.filter((item) => item?.x_sec >= domain.x[0] && item?.x_sec <= domain.x[1])}\r\n barRatio={10}\r\n barWidth={getBarWidth(intervalGraph, numOfGraphsSelected)}\r\n cornerRadius={{ topRight: 4, topLeft: 4 }}\r\n style={{ data: { fill: ({ datum }) => (data.length === 1 && datum.y >= getMax(data) ? barStyles(theme)[2].data.fill : props.activeGraphs.includes('POWER_LIMITATION') ? barStyles(theme)[1].data.fill : barStyles(theme)[i - Math.floor(i / barStyles(theme).length) * barStyles(theme).length].data.fill) } }}\r\n events={[\r\n {\r\n target: \"data\",\r\n eventHandlers: {\r\n onMouseOver: () => {\r\n return [\r\n {\r\n target: \"data\",\r\n mutation: () => { },\r\n // mutation: () => ({ style: barStyles(theme)[barStyles(theme).length - 1].data }),\r\n }\r\n ]\r\n },\r\n onMouseOut: () => {\r\n return [\r\n {\r\n target: \"data\",\r\n mutation: () => { },\r\n }\r\n ]\r\n },\r\n onClick: handleBarClick\r\n },\r\n },\r\n ]}\r\n />))\r\n }\r\n \r\n {props.activeGraphs.length && props.activeGraphs.includes('IRRADIANCE_GEN') ?\r\n {\r\n if (maxNormalize?.IRRADIANCE !== 0) {\r\n return d?.y / maxNormalize?.IRRADIANCE;\r\n }\r\n else {\r\n return 0;\r\n }\r\n }}\r\n key={data?.filter(item => item?.value === 'IRRADIANCE')[0]?.id}\r\n interpolation={\"monotoneX\"}\r\n data={data?.filter(item => item?.value === 'IRRADIANCE')[0]?.data?.filter((item) => item?.x_sec >= domain.x[0] - 86400 && item?.x_sec <= domain.x[1] + 86400)}\r\n style={linearStyles(theme)[0]}\r\n dependentAxis\r\n />\r\n : null}\r\n {props.activeGraphs.length && props.activeGraphs.includes('POWER_LIMITATION') ?\r\n {\r\n if (maxNormalize?.GENERATION !== 0 && data?.filter(item => item?.value === 'POWER_LIMITATION').length) {\r\n const dataPercentage = data?.filter(item => item?.value === 'POWER_LIMITATION')[0]?.data;\r\n const itemPercentage = dataPercentage.filter(x => x?.x_sec === d?.x_sec);\r\n if (itemPercentage.length) {\r\n return (d?.y / (maxNormalize?.GENERATION * (itemPercentage[0]?.y !== 0 ? itemPercentage[0]?.y / 100 : 1)));\r\n }\r\n else {\r\n return 0;\r\n }\r\n }\r\n else {\r\n return 0;\r\n }\r\n }}\r\n key={data?.filter(item => item?.value === 'GENERATION')[0]?.id}\r\n interpolation={\"monotoneX\"}\r\n data={data?.filter(item => item?.value === 'GENERATION')[0]?.data?.filter((item) => item?.x_sec >= domain.x[0] - 86400 && item?.x_sec <= domain.x[1] + 86400)}\r\n style={{\r\n data: {\r\n fill: \"url(#linearOrangeTransparent25)\",\r\n fillOpacity: 0.3,\r\n stroke: \"#f97316\",\r\n strokeWidth: 2,\r\n strokeDasharray: 7\r\n }\r\n }}\r\n dependentAxis\r\n />\r\n : null}\r\n {props.activeGraphs.length && props.activeGraphs.includes('POWER_LIMITATION') ?\r\n {\r\n if (maxNormalize?.GENERATION !== 0) {\r\n return d?.y / maxNormalize?.GENERATION;\r\n }\r\n else {\r\n return 0;\r\n }\r\n }}\r\n key={data?.filter(item => item?.value === 'GENERATION')[0]?.id}\r\n interpolation={\"monotoneX\"}\r\n data={data?.filter(item => item?.value === 'GENERATION')[0]?.data?.filter((item) => item?.x_sec >= domain.x[0] - 86400 && item?.x_sec <= domain.x[1] + 86400)}\r\n style={linearStyles(theme)[0]}\r\n dependentAxis\r\n />\r\n : null} \r\n {props.activeGraphs.length && props.activeGraphs.includes('IRRADIANCE_GEN') ?\r\n Math.round(x * 100 * maxNormalize?.IRRADIANCE / 100)}\r\n tickLabelComponent={}> }\r\n style={{ axis: { stroke: \"transparent\" }, grid: grid(theme), tickLabels: tickLabelsY(theme), axisLabel: { fontSize: 12, dx: graphContainerWidth - 40 } }}\r\n />\r\n : null}\r\n {props.activeGraphs.length && props.activeGraphs.includes('POWER_LIMITATION') ?\r\n Math.round(x * 100 * maxNormalize?.POWER_LIMITATION / 100)}\r\n tickLabelComponent={}> }\r\n style={{ axis: { stroke: \"transparent\" }, grid: grid(theme), tickLabels: tickLabelsY(theme), axisLabel: { fontSize: 12, dx: graphContainerWidth - 40 } }}\r\n />\r\n : null}\r\n {\r\n if (props.activeGraphs?.includes('IRRADIANCE_GEN') || props.activeGraphs?.includes('POWER_LIMITATION')) {\r\n return Math.round(x * 100 * maxNormalize?.GENERATION / 100)\r\n } else {\r\n return Math.round(x * 100) / 100;\r\n }\r\n }}\r\n tickLabelComponent={}> }\r\n style={{ axis: { stroke: \"transparent\" }, grid: grid(theme), tickLabels: tickLabelsY(theme), axisLabel: { fill: \"red\" } }}\r\n />\r\n item?.x_sec >= domain.x[0] && item?.x_sec <= domain.x[1]).map((item) => item.x_sec)} tickFormat={(x) => `${handlerFormatAxis(x, intervalGraph, props.language.language_locale, false, false, props.activeGraphs?.includes(\"POWER_LIMITATION\"))}`} style={{ tickLabels: tickLabelsX(theme), axis: { stroke: theme === 'dark' ? \"#ffffffa3\" : \"#141414a3\", opacity: 0.2 } }} />\r\n {domain && (intervalGraph === 1 || intervalGraph === 2) ? {\r\n setScrollActive(false)\r\n setDomain({ x: domainZoom.x })\r\n }}\r\n voronoiDimension=\"x\"\r\n labels={() => ` `}\r\n labelComponent={\r\n {!(props.activeGraphs.length && props.activeGraphs.includes('IRRADIANCE_GEN')) ?\r\n data.map((d, i) => (\r\n (item?.x_sec >= domain.x[0] - 7200 && item?.x_sec <= domain.x[1] + 7200) && !(item?.y === 0 && item?.x_sec >= (moment().startOf('day').valueOf() / 1000)))}\r\n style={d?.value !== 'PREDICTION_ACTIVE_ENERGY' ? linearStyles(theme)[i - Math.floor(i / linearStyles(theme).length) * linearStyles(theme).length] : \r\n {data: {stroke: '#f9fafb', strokeWidth: 1, fill: `url(#linearNeutralTransparent25)`, fillOpacity: 0.2, strokeDasharray: 3}}}\r\n />\r\n )) :\r\n data?.filter(item => item?.value !== 'IRRADIANCE').map((d, i) => (\r\n valueY?.y / maxNormalize?.GENERATION}\r\n data={d.data.filter((item) => item?.x_sec >= domain.x[0] && item?.x_sec <= domain.x[1])}\r\n barRatio={10}\r\n barWidth={getBarWidth(intervalGraph, numOfGraphsSelected)}\r\n cornerRadius={{ topRight: 4, topLeft: 4 }}\r\n style={{ data: { fill: ({ datum }) => (data.length === 1 && datum.y >= getMax(data) ? barStyles(theme)[2].data.fill : barStyles(theme)[i - Math.floor(i / barStyles(theme).length) * barStyles(theme).length].data.fill) } }}\r\n />))\r\n }\r\n \r\n {props.activeGraphs.length && props.activeGraphs.includes('IRRADIANCE_GEN') ?\r\n {\r\n if (maxNormalize?.IRRADIANCE !== 0) {\r\n return d?.y / maxNormalize?.IRRADIANCE;\r\n }\r\n else {\r\n return 0;\r\n }\r\n }}\r\n key={data?.filter(item => item?.value === 'IRRADIANCE')[0]?.id}\r\n interpolation={\"monotoneX\"}\r\n data={data?.filter(item => item?.value === 'IRRADIANCE')[0]?.data?.filter((item) => item?.x_sec >= domain.x[0] && item?.x_sec <= domain.x[1])}\r\n style={linearStyles(theme)[1]}\r\n dependentAxis\r\n />\r\n : null}\r\n {props.activeGraphs.length && props.activeGraphs.includes('IRRADIANCE_GEN') ?\r\n Math.round(x * 100 * maxNormalize?.IRRADIANCE / 100)}\r\n tickLabelComponent={}> }\r\n style={{ axis: { stroke: \"transparent\" }, grid: grid(theme), tickLabels: tickLabelsY(theme), axisLabel: { fontSize: 12, dx: graphContainerWidth - 40 } }}\r\n />\r\n : null}\r\n {\r\n if (props.activeGraphs?.includes('IRRADIANCE_GEN')) {\r\n return Math.round(x * 100 * maxNormalize?.GENERATION / 100)\r\n } else if (props.activeGraphs?.includes('OPERATION_STATE')) {\r\n return formatOperationStateValue(x)\r\n } else {\r\n return Math.round(x * 100) / 100;\r\n }\r\n }}\r\n tickLabelComponent={}> }\r\n style={{ axis: { stroke: \"transparent\" }, grid: grid(theme), tickLabels: tickLabelsY(theme) }}\r\n />\r\n item?.x_sec >= domain.x[0] && item?.x_sec <= domain.x[1]).map((item) => item.x_sec)} tickFormat={(x) => `${handlerFormatAxis(x, intervalGraph, props.language.language_locale)}:00`} style={{ tickLabels: tickLabelsX(theme), axis: { stroke: theme === 'dark' ? \"#ffffffa3\" : \"#141414a3\", opacity: 0.2 } }} />\r\n {data.length === 1 && data[0]?.data.length && props.enableAverageLine ? !(item?.y === 0 && item?.x_sec >= (moment().startOf('day').valueOf() / 1000)))}\r\n style={linearStyles(theme)[i - Math.floor(i / linearStyles(theme).length) * linearStyles(theme).length]}\r\n valueData={d?.value}\r\n />\r\n ))}\r\n \r\n )}\r\n
\r\n ) : (\r\n {\r\n setScrollActive(false);\r\n setDomain(getNextMonth(domain?.x[1] * 1000, true, intervalGraph, props.language.language_locale, props.activeGraphs.includes(\"POWER_LIMITATION\"), sampledTime));\r\n track('Graphic clicked', { Graphic_Back: 'activate', Rank_ID: props.rankGraphId, Project_Type: props.activeServicesEnergy.map(function (service) { return service?.type?.name }) })\r\n }}>\r\n \r\n
}\r\n {intervalGraph === 3 || (intervalGraph === 2 && numOfGraphsSelected >= 3) || (intervalGraph === 1 && numOfGraphsSelected >= 8) ? null :\r\n {\r\n setScrollActive(false);\r\n const nextValue = getNextMonth(domain?.x[1] * 1000, false, intervalGraph, props.language.language_locale, props.activeGraphs.includes(\"POWER_LIMITATION\"), sampledTime);\r\n if (nextValue && nextValue?.x[1] - 86400 <= entireDomain.x[1]) {\r\n setDomain(nextValue);\r\n }\r\n track('Graphic clicked', { Graphic_Forward: 'activate', Rank_ID: props.rankGraphId, Project_Type: props.activeServicesEnergy.map(function (service) { return service?.type?.name }) })\r\n }}>\r\n \r\n
}\r\n {props.activeGraphs.includes('IRRADIANCE_GEN') ?\r\n Generación (kWh)
\r\n Irradiación (Wh/m2)
\r\n Generación (kWh)
\r\n Porcentaje de generación (%)
\r\n \r\n {\r\n props.invoiceInfo ?\r\n \r\n
)\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n invoiceInfo: state.energy.invoiceInfo,\r\n language: state.shared.language,\r\n theme: state.theme.theme,\r\n});\r\n\r\nexport default connect(mapStateToProps)(Invoice);","import React from \"react\"\r\nimport { connect } from \"react-redux\"\r\n\r\nimport * as energyActions from \"../../../store/actions/Energy\"\r\n\r\nimport { Popover } from \"@idui/react-popover\"\r\n\r\nimport ContentLoader from \"react-content-loader\"\r\n\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\r\nimport { far } from \"@fortawesome/pro-regular-svg-icons\"\r\nimport { fas } from \"@fortawesome/pro-solid-svg-icons\"\r\n\r\nconst servicesLoading = (theme) => { return (\r\n \r\n
\r\n \r\n \r\n
\r\n {props.language.energy_invoice_show_bills}
\r\n{format(new Date(props.invoiceInfo.year, props.invoiceInfo.month - 1, 1), \"MMMM yyyy\", { locale: locale })}
\r\n\r\n
\r\n :\r\n {props.invoiceInfo.total_payment}
\r\n {\r\n props.invoiceInfo.state ?\r\n\r\n \r\n
:\r\n {props.language.energy_invoice_state_paid}
\r\n\r\n \r\n
\r\n }\r\n {props.language.energy_invoice_state_to_pay}
\r\n\r\n 
\r\n
\r\n }\r\n {props.language.energy_invoice_no_bills}
\r\n \r\n \r\n \r\n
\r\n)}\r\n\r\nconst ActiveServicesEnergy = (props) => {\r\n\r\n let activeServices = props.activeServices\r\n let setActiveServices = props.setActiveServices\r\n let showActiveServices = props.showActiveServices\r\n let showDetailService = props.showDetailService\r\n let activeServiceDetail = props.activeServiceDetail\r\n let setActiveServiceDetail = props.setActiveServiceDetail\r\n\r\n const setShowDetailService = props.setShowDetailService\r\n\r\n const { theme } = props;\r\n\r\n return (\r\n activeServices.length ?\r\n \r\n {activeServices.slice(0, showActiveServices).map((service) => (\r\n \r\n
\r\n }>\r\n \r\n
\r\n \r\n
\r\n {service.name}
\r\n {service.name}
\r\n {activeServices.length > 1 && (\r\n\r\n {activeServices.slice(showActiveServices).map((item) => (\r\n
\r\n \r\n }>\r\n \r\n {\r\n props.setActiveServices(activeServices.filter((i) => i.idService !== item.idService))\r\n }}\r\n />\r\n
\r\n ))}\r\n \r\n {item.name}\r\n
\r\n \r\n \r\n
\r\n \r\n )}\r\n :\r\n {activeServices.length - showActiveServices}
\r\n {servicesLoading(theme)}
\r\n )\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n language: state.shared.language,\r\n showDetailService: state.energy.showDetailService,\r\n theme: state.theme.theme,\r\n})\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n setShowDetailService: (payload) => dispatch(energyActions.setShowDetailService(payload)),\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ActiveServicesEnergy)\r\n","import React, { Fragment, useState, useEffect } from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport * as usersActions from \"../../../store/actions/Users\";\r\n\r\nimport { useTable, useSortBy, usePagination } from \"react-table\";\r\n\r\nimport amplitude from \"amplitude-js\";\r\nimport empty_users from \"../../../imgs/empty-users.svg\";\r\nimport empty_users_light from \"../../../imgs/empty-user-light.svg\";\r\n\r\nconst Table = ({ columns, data, actions, page, deleteAction, ...props }) => {\r\n const { theme } = props;\r\n\r\n const {\r\n getTableBodyProps,\r\n headerGroups,\r\n prepareRow\r\n } = useTable({ columns, data }, useSortBy, usePagination);\r\n\r\n const [userSelected, setUserSelected] = useState(null);\r\n\r\n useEffect(() => {\r\n if (userSelected) { actions(userSelected); }\r\n }, [actions, userSelected]);\r\n\r\n return (\r\n \r\n \r\n \r\n {headerGroups\r\n .map((headerGroup) => (\r\n
\r\n
:\r\n | \r\n \r\n \r\n {column.render(\"Header\")} \r\n \r\n {column.isSorted ?\r\n column.isSortedDesc\r\n ? \r\n : :\r\n \"\"}\r\n \r\n | \r\n ))}\r\n
|---|
| \r\n {\r\n // cell.column.id === \"services\" ?\r\n // \r\n // \r\n // {cell.render(\"Cell\")}\r\n // :\r\n // cell.column.id === \"department\" && cell.value ?\r\n // \r\n // {cell.value?.length > 1 ?\r\n // :\r\n cell.column.id === \"edit\" ?\r\n \r\n // :\r\n // \r\n // {props.language[cell?.value[0]?.valueText]}\r\n // \r\n // {`+${cell.value.length - 1}`} \r\n // \r\n // {props.language[cell?.value[0]?.valueText] ?? 'N/A'}\r\n // }\r\n // {/* \r\n // {cell.value.length > 1 ? `${cell.value[0]?.name} ...+${cell.value.length - 1}` : cell.value[0]?.name ?? 'N/A'}\r\n // */}\r\n // \r\n :\r\n cell.render(\"Cell\")}\r\n { setUserSelected(cell.row.values); props.setShowCreateUserModal(2); amplitude.getInstance().logEvent(\"Edit User\"); }}>\r\n \r\n \r\n { deleteAction(cell.row.values); amplitude.getInstance().logEvent(\"Delete User\"); }}>\r\n \r\n \r\n | \r\n )\r\n })}\r\n
\r\n \r\n
\r\n }\r\n {props.language.user_table_title_empty_state}
\r\n {props.language.user_table_description_empty_state}
\r\n {/* */}\r\n \r\n
\r\n \r\n
\r\n \r\n {props.language.users_title_main_header}
\r\n \r\n\r\n
:\r\n \r\n
\r\n \r\n \r\n {\r\n const page = e.target.value ? Number(e.target.value) - 1 : 0;\r\n gotoPage(page);\r\n }}\r\n /> */}\r\n {/* {\r\n setPageSize(Number(e.target.value));\r\n }}>\r\n {[5, 10, 15, 20].map((pageSize) => (\r\n \r\n ))}\r\n */}\r\n
\r\n {`${props.language.pagination} ${pageIndex + 1} ${props.language.pagination_of} ${pageOptions.length}`}
\r\n \r\n {/*{props.language.users_pagination_go_to_page}
*/}\r\n {/*\r\n ({ value: size, label: `${props.language.users_pagination_show_page} ${size}` }))}\r\n selectedData={[pageSize]} \r\n singleSelect={true} \r\n value={`${props.language.users_pagination_show_page} ${pageSize}`}\r\n onChange={(data) => setPageSize(data[0])} \r\n width={'8rem'}\r\n />\r\n
\r\n \r\n \r\n {(state) => (\r\n \r\n
\r\n)\r\n\r\nconst UserCreate = (props) => {\r\n\r\n let userJobs = props.userJobs;\r\n let userAccessEdit = props.userAccessEdit;\r\n let language = props.language;\r\n\r\n const { theme } = props;\r\n\r\n const [userForm, setUserForm] = useState(initUserForm);\r\n const [isEnable, setEnable] = useState(false);\r\n const [focus, setFocus] = useState(0);\r\n const [error, setError] = useState(\"\");\r\n\r\n const loadUserJobsAsync = props.loadUserJobsAsync;\r\n const createUserAsync = props.createUserAsync;\r\n const updateUserAsync = props.updateUserAsync;\r\n\r\n useEffect(() => {\r\n if (!userJobs.length)\r\n loadUserJobsAsync();\r\n }, [userJobs, loadUserJobsAsync]);\r\n\r\n useEffect(() => {\r\n userAccessEdit !== null ? setUserForm(userAccessEdit) : setUserForm(initUserForm)\r\n }, [userAccessEdit]);\r\n\r\n useEffect(() => {\r\n setEnable(isValidUser(userForm));\r\n }, [userForm]);\r\n\r\n useEffect(() => {\r\n if (focus !== 0) { showError(userForm, setFocus, setError, language) }\r\n }, [userForm, language, focus]);\r\n\r\n const handleClose = () => {\r\n props.setShowCreateUserModal(false);\r\n props.setUserAccessEdit(null);\r\n }\r\n\r\n const formatLabel = (array1, array2, keyName, labelName) => {\r\n\r\n let array3 = array1.map(x => array2.filter(y => y[keyName] === x))\r\n .flat()\r\n\r\n return array3.map((s, index) => {\r\n if (index === array3.length - 1) {\r\n return `${s[labelName]}. `;\r\n } else {\r\n return `${s[labelName]}, `;\r\n }\r\n\r\n }).join(\"\");\r\n }\r\n\r\n return (\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n {props.showCreateUserModal === 2 ? props.language.user_title_edit_user : props.language.user_title_create_user}
\r\n \r\n{userLoadingContainer(props.usersLoading, props.language)}
:\r\n \r\n
}\r\n \r\n
\r\n \r\n {\r\n setUserForm({ ...userForm, name: target.value })\r\n }}\r\n error={focus === 1 ? error : \"\"}\r\n />\r\n
\r\n \r\n {\r\n setUserForm({ ...userForm, lastname: target.value })\r\n }}\r\n error={focus === 2 ? error : \"\"}\r\n />\r\n
\r\n \r\n
\r\n \r\n {\r\n setUserForm({ ...userForm, idDocument: target.value })\r\n }}\r\n error={focus === 3 ? error : \"\"}\r\n />\r\n
\r\n \r\n {\r\n setUserForm({ ...userForm, phone: target.value })\r\n }}\r\n error={focus === 4 ? error : \"\"}\r\n />\r\n
\r\n \r\n
\r\n \r\n {\r\n setUserForm({ ...userForm, email: target.value })\r\n }}\r\n error={focus === 5 ? error : \"\"}\r\n />\r\n
\r\n \r\n
\r\n {userForm ?\r\n \r\n setUserForm({ ...userForm, roleIds: value })}\r\n error={focus === 6 ? error : \"\"}\r\n value={userForm?.roleIds.length && `${props.language.user_selected_label_job_area}: ${userForm?.roleIds.length}`}\r\n />\r\n
\r\n \r\n setUserForm({ ...userForm, servicesIds: value })}\r\n error={focus === 7 ? error : \"\"}\r\n value={userForm?.servicesIds.length && `${props.language.user_select_label_services_selected}: ${userForm?.servicesIds.length}`}\r\n />\r\n
\r\n \r\n \r\n \r\n
:\r\n \r\n \r\n \r\n
\r\n }\r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nconst ServicesEnergy = (props) => {\r\n\r\n let activeServicesEnergy = props.activeServicesEnergy\r\n let showDetailService = props.showDetailService\r\n let usersByService = props.usersByService\r\n\r\n const { theme } = props;\r\n\r\n const loadUsersByServiceAsync = props.loadUsersByServiceAsync\r\n\r\n const [activeServiceDetail, setActiveServiceDetail] = useState(activeServicesEnergy[0])\r\n\r\n useEffect(() => {\r\n const currentIndex = activeServicesEnergy?.findIndex(s => s.idService === activeServiceDetail?.idService)\r\n if (currentIndex < 0)\r\n setActiveServiceDetail(activeServicesEnergy[0])\r\n // eslint-disable-next-line\r\n }, [activeServicesEnergy])\r\n\r\n useEffect(() => {\r\n if (showDetailService && activeServiceDetail)\r\n loadUsersByServiceAsync(activeServiceDetail.idService)\r\n }, [showDetailService, activeServiceDetail, loadUsersByServiceAsync])\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {props.language.energy_main_title_dashboard}
\r\n\r\n {\r\n const filteredPlusServices = value.filter(service => service.type.typeService === 2)\r\n props.setActiveServicesEnergy(value)\r\n if (filteredPlusServices.length) props.setActiveServicesPlus([_.last(filteredPlusServices)])\r\n }}\r\n availableTypeServices={[\"energy\", \"plus\", \"generation\"]}\r\n limitSelectServices={3}\r\n typeComponent={'energy'}\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n }>\r\n {props.language.energy_adress_title}
\r\n {activeServiceDetail?.address ?\r\n\r\n
\r\n \r\n
\r\n {activeServiceDetail?.address}
\r\n \r\n
\r\n :\r\n {activeServiceDetail?.address}
\r\n\r\n
}\r\n {props.language.energy_graph_no_data}
\r\n\r\n
\r\n {props.language.energy_service_type_title}
\r\n\r\n
\r\n \r\n
\r\n {activeServiceDetail?.type.name ?? props.language.energy_graph_no_data}
\r\n \r\n\r\n
\r\n \r\n
\r\n props.setShowUsersListModal(true)} className={`label-small-regular content-default-tertiary ${theme}`}>\r\n {props.language.energy_users_title}\r\n
\r\n\r\n props.setShowCreateUserModal(true)}\r\n theme={theme}\r\n background=\"surface-bg-on-surface\"\r\n color=\"content-default-tertiary\"\r\n />\r\n {\r\n !usersByService[activeServiceDetail?.idService] ?\r\n usersLoading(theme)\r\n : usersByService[activeServiceDetail?.idService].length ?\r\n \r\n {\r\n usersByService[activeServiceDetail?.idService].map((user) => {\r\n return (\r\n :\r\n
\r\n \r\n
\r\n )\r\n })\r\n }\r\n \r\n
\r\n \r\n
\r\n \r\n {!user.image ? : 
}\r\n
\r\n \r\n {user.name} {user.lastname}\r\n
\r\n\r\n
\r\n }\r\n {props.language.energy_no_users}
\r\n\r\n
\r\n ),\r\n title: language.onboarding_service_title_step1,\r\n description: language.onboarding_service_description_step1,\r\n placement: \"auto\",\r\n target: \"#menu_services\",\r\n disableBeacon: true,\r\n steps: 3,\r\n },\r\n {\r\n content: (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n ),\r\n title: language.onboarding_service_title_step2,\r\n description: language.onboarding_service_description_step2,\r\n placement: \"auto\", \r\n target: \"#service_picker\",\r\n disableBeacon: true,\r\n steps: 3,\r\n },\r\n { \r\n content:\r\n \r\n
,\r\n title: language.onboarding_service_title_step3,\r\n description: language.onboarding_service_description_step3,\r\n placement: \"auto\", \r\n target: \"#active_service\",\r\n disableBeacon: true,\r\n steps: 3,\r\n }\r\n ]\r\n )\r\n} \r\n","import React, { Fragment, useEffect, useState } from \"react\"\r\nimport { connect } from \"react-redux\"\r\n\r\nimport * as servicesActions from \"../../store/actions/Services\"\r\nimport * as sharedActions from \"../../store/actions/Shared\"\r\nimport * as energyActions from \"../../store/actions/Energy\"\r\nimport * as usersActions from \"../../store/actions/Users\"\r\n\r\nimport { getAnalytics, logEvent } from \"firebase/analytics\"\r\n\r\nimport ContentLoader from \"react-content-loader\"\r\n\r\nimport { Transition } from \"react-transition-group\"\r\n\r\nimport { Loader } from \"rsuite\"\r\n\r\nimport Cards from \"./cards/Cards\"\r\nimport Graph from \"./graphs/Graph\"\r\nimport Invoice from \"./invoice/Invoice\"\r\nimport Header from \"../shared/Header\"\r\nimport ServicesContainer from \"./services/ServicesContainer\"\r\n\r\nimport useTour from '../onboarding/hook/useTour';\r\nimport { stepsService } from '../onboarding/steps/ServiceSteps'; // eslint-disable-line no-unused-vars\r\n\r\nconst analytics = getAnalytics()\r\n\r\nconst graphLoadingContainer = (loading, language) => (\r\n \r\n \r\n
\r\n {language.service_label_active_project_example}
\r\n \r\n\r\n \r\n {(state) => (\r\n \r\n
\r\n)\r\n\r\nconst indicatorsLoading = (theme) => { return(\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n)}\r\n\r\nconst CardsContent = ({ activeServices }) => {\r\n\r\n let mainCard;\r\n let widthCard = 0;\r\n\r\n if (activeServices.some(s => s.type.name === \"energy\")) {\r\n\r\n mainCard = \r\n
\r\n \r\n
\r\n {/* {!props.userPreferenceInfo && !props.graphLoading && !props.indicatorsLoading ? \r\n {props.indicatorsLoading ?\r\n
\r\n {indicatorsLoading(theme)}
:\r\n \r\n
\r\n {!props.graphLoading ?
\r\n {graphLoadingContainer(props.graphLoading, props.language)}
}\r\n props.setShowAccount(true)}\r\n >\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {state !== \"exited\" && (\r\n \r\n {!user.image ? (\r\n \r\n ) : (\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default RoleSelection;\r\n","import React, { Fragment, useEffect, useState } from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport { useLocation, useHistory } from \"react-router-dom\";\r\n\r\nimport * as sharedActions from \"../../store/actions/Shared\";\r\nimport * as themeActions from \"../../store/actions/Theme\";\r\n\r\nimport { Transition } from \"react-transition-group\";\r\n\r\nimport User from \"./User\";\r\n\r\nimport DynamicMenu from \"./DynamicMenu\";\r\nimport RoleSelection from \"./RoleSelection\";\r\n\r\nimport { themes } from \"../../utils/enums\";\r\n\r\nimport LogoLight from \"../../imgs/logo-enrg-light.svg\";\r\nimport LogoDark from \"../../imgs/logo-enrg-dark.svg\";\r\n\r\nconst getActivePath = (location) => {\r\n if (location.pathname === \"/home\") return \"dashboard\";\r\n const parts = location.pathname.split(\"/\");\r\n return parts[1].toLowerCase();\r\n};\r\n\r\nconst Menu = (props) => {\r\n let user = props.user;\r\n const { theme } = props;\r\n const { user_modules } = user?.capabilities;\r\n const location = useLocation();\r\n const history = useHistory();\r\n\r\n const is_worker = user\r\n ? user_modules.some((module) => module?.worker === true)\r\n : false;\r\n\r\n const [active, setActive] = useState(getActivePath(location));\r\n\r\n const [showRoles, setShowRoles] = useState(false);\r\n\r\n const [role, setRole] = useState(\r\n is_worker ? { type: 1, name: \"eWorker\" } : { type: 2, name: \"Customer\" }\r\n );\r\n\r\n const availableRoles = [\r\n { type: 1, name: \"eWorker\" },\r\n { type: 2, name: \"Customer\" },\r\n ];\r\n\r\n useEffect(() => setActive(getActivePath(location)), [location]);\r\n\r\n useEffect(() => {\r\n props.setMenu(false);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n useEffect(() => {\r\n const worker = user_modules.find(\r\n (module) => `/${active}` === module.redirect\r\n )?.worker;\r\n\r\n if (worker && role.type !== 1) {\r\n setRole(availableRoles[0]);\r\n } else if (!worker && role.type !== 2) {\r\n setRole(availableRoles[1]);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [active]);\r\n\r\n const sortModules = (modules, roleType) => {\r\n return modules\r\n .filter((module) => module.redirect && module.worker === (roleType === 1))\r\n .sort((a, b) => {\r\n const priority = [\"Dashboard\", \"Analytics\"];\r\n\r\n if (priority.includes(a.name) && !priority.includes(b.name)) return -1;\r\n if (priority.includes(b.name) && !priority.includes(a.name)) return 1;\r\n return 0;\r\n });\r\n };\r\n\r\n const handleRoleSelection = (s_role) => {\r\n setRole(s_role);\r\n\r\n const modules = sortModules(user_modules, s_role.type).filter(\r\n (mod) => mod.redirect\r\n );\r\n\r\n modules &&\r\n history.push(\r\n modules[0].redirect === \"/dashboard\" ? \"/home\" : modules[0].redirect\r\n );\r\n\r\n setTimeout(() => {\r\n setShowRoles(false);\r\n }, 200);\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {role.name}\r\n \r\n \r\n\r\n \r\n
\r\n \r\n {is_worker ? (\r\n
\r\n ) : (\r\n \r\n {\r\n if (is_worker) {\r\n setTimeout(() => {\r\n setShowRoles(!showRoles);\r\n }, 150);\r\n }\r\n }}\r\n >\r\n
\r\n \r\n \r\n {text}\r\n \r\n
\r\n }\r\n >\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n text: ownProps.text,\r\n});\r\n\r\nexport default connect(mapStateToProps)(Tooltip);\r\n","import React, { Fragment, useEffect } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as invoicesActions from '../../store/actions/Invoices';\r\n\r\nimport { sortByDate } from '../../services/CalendarHandler';\r\n\r\nimport { CircularProgressbarWithChildren } from 'react-circular-progressbar';\r\n\r\nimport QRCode from \"react-qr-code\";\r\n\r\nimport signature from '../../imgs/jeh-signature.png';\r\n\r\nimport TooltipInfo from '../shared/utilities/Tooltip';\r\n\r\nimport Logo from \"../../imgs/logo-erco-black.svg\";\r\nimport PSELogo from \"../../imgs/pse_bg_blue.svg\";\r\nimport VisaLogo from \"../../imgs/visa_bg_blue.svg\";\r\nimport MastercardLogo from \"../../imgs/mastercadr_bg_black.svg\";\r\nimport AmericanLogo from \"../../imgs/american_express.svg\";\r\nimport VigiladoLogo from \"../../imgs/vigilado_superservicios.svg\";\r\n\r\nimport CryptoJS from 'crypto-js';\r\n\r\nconst encryptId = (id, key) => {\r\n const keyBytes = CryptoJS.enc.Utf8.parse(key);\r\n const iv = CryptoJS.enc.Utf8.parse('0123456789abcdef');\r\n const encrypted = CryptoJS.AES.encrypt(id, keyBytes, {\r\n iv: iv,\r\n mode: CryptoJS.mode.CBC,\r\n padding: CryptoJS.pad.Pkcs7,\r\n });\r\n return encrypted.ciphertext.toString(CryptoJS.enc.Base64url);\r\n};\r\n\r\nconst InvoiceDetails = (props) => {\r\n let theme = props.theme;\r\n let invoiceDetailsContent = props.invoiceDetailsContent;\r\n let invoiceDetails = props.invoiceDetails;\r\n let invoiceShow = props.invoiceShow;\r\n\r\n const baseLink = \"https://erco.energy/co/servicios/comercializacion/pago-factura\";\r\n const secretKey = process.env.REACT_APP_QR_CRYPTO_KEY;\r\n\r\n const loadInvoiceDetailsContent = props.loadInvoiceDetailsContent;\r\n \r\n const groupConceptsByServiceType = (concepts) => {\r\n return concepts.reduce((result, concept) => {\r\n const serviceType = concept.service_type;\r\n if (!result[serviceType]) {\r\n result[serviceType] = [];\r\n }\r\n result[serviceType].push(concept);\r\n return result;\r\n }, {});\r\n };\r\n\r\n useEffect(() => {\r\n if (invoiceDetails !== null && invoiceShow?.type_content !== 'pdf') { loadInvoiceDetailsContent() }\r\n }, [loadInvoiceDetailsContent, invoiceDetails, invoiceShow]);\r\n\r\n theme = 'light'\r\n\r\n return (\r\n \r\n
\r\n {/* Pagina 2 */}\r\n \r\n {invoiceDetailsContent.content.map((c, index) => (\r\n ))}\r\n
\r\n Impreso por CENET SA NIT 830057860 - MISFACTURAS | {c.dian_resolution}
\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_bill}
\r\n {c.bill}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_total} de la factura {c.bill}
\r\n {c.total}
\r\n {props.language.invoice_content_text_billed_period}: {c.billed_since} a {c.billed_until}
\r\n \r\n
\r\n \r\n
\r\n {c.suspension_date === 'Suspendido' ? (\r\n \r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_bill_date}
\r\n {c.bill_date}
\r\n \r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_due_date}
\r\n {c.due_date}
\r\n \r\n
\r\n ) : c.suspension_date === null && c.outstanding_balance === \"0\" ? (\r\n null\r\n ) : (\r\n \r\n
\r\n {props.language.support_select_label_service}
\r\n {c.suspension_date}
\r\n \r\n
\r\n )}\r\n \r\n
\r\n {props.language.invoice_content_text_suspension_date}
\r\n {c.suspension_date}
\r\n \r\n
\r\n \r\n {c.outstanding_balance === \"0\" ? (\r\n c.creg_1050072024 === \"upper_deviation\" ? (\r\n
\r\n \r\n \r\n
\r\n ) : (\r\n \r\n {props.language.invoice_content_check_consumption}{props.language.invoice_content_text_check_consumption}\r\n
\r\n \r\n \r\n
\r\n )\r\n ) : (\r\n \r\n {props.language.invoice_content_text_strong_balance}\r\n {props.language.invoice_content_first_text_balance} {props.language.invoice_content_second_text_balance}\r\n
\r\n \r\n \r\n
\r\n )}\r\n \r\n ¡Atención! {props.language.invoice_content_text_strong_outstanding_balance} por un valor de:
\r\n ${c.outstanding_balance}\r\n
\r\n \r\n ${c.outstanding_balance}\r\n
\r\n
\r\n \r\n \r\n
\r\n {props.language.invoice_content_text_suspension_date_empty}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_customer_name}
\r\n {c.customer_name}
\r\n \r\n
\r\n {props.language.invoice_content_text_contract}
\r\n {c.contract}
\r\n \r\n
\r\n \r\n
\r\n {c.type_id}
\r\n {c.id}
\r\n \r\n
\r\n {c.factor_embedded && (\r\n {props.language.invoice_content_text_niu}
\r\n {c.niu}
\r\n \r\n
\r\n )}\r\n {props.language.invoice_content_text_embedded_border_factor}
\r\n {c.factor_embedded}
\r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_service_name}
\r\n {c.service_name}
\r\n \r\n
\r\n {props.language.invoice_content_text_billing_address}
\r\n {c.billing_address}
\r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_municipality}
\r\n {c.city_name}
\r\n \r\n
\r\n {props.language.invoice_content_text_department}
\r\n {c.state_name}
\r\n \r\n
\r\n {props.language.invoice_content_text_market}
\r\n {c.is_unregulated_market ?\r\n {props.language.invoice_content_text_unregulated_market}
:\r\n {props.language.invoice_content_text_regulated_market}
\r\n }\r\n \r\n
\r\n {props.language.invoice_content_text_active_energy_consumption}
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_days_billed}
\r\n {c.days_billed}
\r\n \r\n
\r\n {props.language.invoice_content_text_billed_since}
\r\n {c.billed_since}
\r\n \r\n
\r\n {props.language.invoice_content_text_billed_until}
\r\n {c.billed_until}
\r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_avg_six_months}
\r\n {c.avg_6_months} kWh
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {invoiceDetailsContent.graph.sort(sortByDate).map((g, index, array) => {\r\n const isLast = index === array.length - 1;\r\n const isDeviation = c.creg_1050072024_r === \"upper_deviation\" || c.creg_1050072024 === \"upper_deviation\";\r\n const backgroundColor = isLast\r\n ? isDeviation\r\n ? \"#EA580C\"\r\n : \"#7DA60C\"\r\n : isDeviation\r\n ? \"rgba(249, 115, 22, 0.32)\"\r\n : \"rgba(158, 204, 20, 0.32)\";\r\n const textColor = isDeviation ? \"content-color-orange\" : \"content-color-green\";\r\n\r\n return (\r\n \r\n {[100, 75, 50, 25, 0].map((number, index) => (\r\n
\r\n \r\n {number}\r\n
\r\n ))}\r\n \r\n {Array.from({ length: 12 }).map((_, index) => (\r\n
\r\n -
\r\n ))}\r\n \r\n
\r\n );\r\n })}\r\n ${g.total}
\r\n ${g.cu}
\r\n \r\n {g.quantity}
\r\n \r\n {isLast ? \"Actual\" : `${g.month}`}
\r\n \r\n
\r\n \r\n \r\n
\r\n {props.language.invoice_content_text_monthly_rate_cu}
\r\n \r\n \r\n
\r\n {props.language.invoice_content_text_label_pay_month}
\r\n \r\n \r\n
\r\n {props.language.invoice_content_text_consumption}\r\n
\r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_current_consumption}
\r\n {c.consumption} kWh
\r\n \r\n
\r\n {props.language.tag_manager_table_header_reactive_energy}
\r\n (kVArh)
\r\n \r\n
\r\n {props.language.invoice_content_text_reactive_factor}
\r\n {c.reactive_factor}
\r\n \r\n
\r\n {props.language.invoice_content_text_billed_inductive}
\r\n {c.amount_billed_reactive_inductive}
\r\n {props.language.invoice_content_text_billed_capacity}
\r\n {c.amount_billed_reactive_capacitive}
\r\n {props.language.invoice_content_text_total_billed}
\r\n {c.amount_billed_reactive}
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_or}
\r\n {c.or}
\r\n \r\n
\r\n {props.language.invoice_content_text_distr_circuit}
\r\n {c.distr_circuit}
\r\n \r\n
\r\n {props.language.invoice_content_text_transf_number}
\r\n {c.transf_number}
\r\n \r\n
\r\n {props.language.invoice_content_text_meter_code}
\r\n {c.meter_code}
\r\n {props.language.invoice_content_text_tariff_detail}
\r\n \r\n {props.language.invoice_content_first_text_tariff} {props.language.invoice_content_first_text_strong_tariff} {props.language.invoice_content_second_text_tariff} {c.is_unregulated_market ? 'Mercado no regulado' : 'Mercado regulado'}, {props.language.invoice_content_third_text_tariff} {props.language.invoice_content_third_text_strong_tariff} {c.voltage_level}, {props.language.invoice_content_fourth_text_tariff} {props.language.invoice_content_fourth_text_strong_tariff} {c.social_stratum}, {props.language.invoice_content_fifth_text_tariff}\r\n {c.asset_ownership} {props.language.invoice_content_sixth_text_tariff} {c.location_type} {c.tariff_type}\r\n
\r\n \r\n {((start = 0, gap = 2) => (\r\n <>\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n G
\r\n {props.language.invoice_content_text_tariff_g}
\r\n ${c.g}
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n T
\r\n {props.language.invoice_content_text_tariff_t}
\r\n ${c.t}
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n D
\r\n {props.language.invoice_content_text_tariff_d}
\r\n ${c.d}
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n {c.cot ? (\r\n Cv + COT
\r\n ) : (\r\n Cv
\r\n )}\r\n {props.language.invoice_content_text_tariff_cv}
\r\n ${c.cv}
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n P
\r\n {props.language.invoice_content_text_tariff_pr}
\r\n ${c.pr}
\r\n \r\n
\r\n {c.is_unregulated_market && (\r\n \r\n \r\n \r\n \r\n
\r\n R
\r\n {props.language.invoice_content_text_tariff_r}
\r\n ${c.r}
\r\n \r\n
\r\n )}\r\n \r\n ))()}\r\n \r\n \r\n \r\n \r\n
\r\n CR
\r\n {props.language.invoice_content_text_tariff_cr}
\r\n ${c.cr}
\r\n \r\n
\r\n \r\n {c.is_unregulated_market ?\r\n
\r\n \r\n
:\r\n CU
=\r\nG
+\r\nT
+\r\nD
+\r\n {c.cot ?CV + COT
:CV
}+\r\nP
+\r\nR
+\r\nCR
\r\n\r\n
\r\n }\r\n CU
=\r\nG
+\r\nT
+\r\nD
+\r\n {c.cot ?CV + COT
:CV
}+\r\nP
+\r\nR
\r\n{c.cot ? props.language.invoice_content_text_tariff_cu_cot : props.language.invoice_content_text_tariff_cu} = ${c.cu}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_support}
\r\n soporte@erco.energy
\r\n \r\n
\r\n {props.language.power_factor_label_phase} {props.language.invoices_account_total_selection_separator} {props.language.invoice_content_text_support_emergency}
\r\n (+57) 601 6659652
\r\n \r\n
\r\n {props.language.invoice_content_text_footer_page}
\r\n 1/3
\r\n \r\n
\r\n\r\n {/* Pagina 3 */}\r\n \r\n {invoiceDetailsContent.content.map((c, index) => (\r\n
\r\n\r\n \r\n
\r\n ))}\r\n Impreso por CENET SA NIT 830057860 - MISFACTURAS | {c.dian_resolution}
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_bill}
\r\n {c.bill}
\r\n \r\n {Object.entries(groupConceptsByServiceType(invoiceDetailsContent.concepts)).map(([serviceType, items], index) => (\r\n \r\n \r\n ))}\r\n
\r\n {invoiceDetailsContent.content.map((c, index) => (\r\n \r\n \r\n
\r\n {serviceType}
\r\n \r\n {/* titulo */}\r\n
\r\n \r\n
\r\n {/* contenido */}\r\n {items.map((cp, conceptIndex) => (\r\n \r\n
\r\n {props.language.invoice_content_text_header_table_detail}
\r\n \r\n
\r\n \r\n {serviceType === 'SALDOS A FAVOR DDV'\r\n ? props.language.invoice_content_text_header_table_month_value\r\n : serviceType.split(\" (\")[0] === 'INTERESES DE MORA'\r\n ? props.language.invoice_content_text_header_table_concept_value\r\n : props.language.invoice_content_text_header_table_unit_value}\r\n
\r\n \r\n
\r\n \r\n {serviceType.split(\" (\")[0] === 'INTERESES DE MORA'\r\n ? props.language.invoice_content_text_header_table_days_quantity\r\n : props.language.invoice_content_text_header_table_quantity}\r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_header_table_value}
\r\n \r\n
\r\n ))}\r\n {/* subtotal */}\r\n \r\n
\r\n \r\n {props.language[`tooltip_${cp.code.replace(/\\./g, '_').toLocaleLowerCase()}`] !== \"\" ?\r\n { }}\r\n fontSize={6}\r\n fontIcon={6}\r\n typeIcon={'solid'}\r\n colorIcon={'black'}\r\n bgColor={'gray-550'}\r\n /> : null}\r\n
\r\n \r\n {serviceType === 'SALDOS A FAVOR DDV'\r\n ? cp?.item.replace(/\\s*\\(.*?\\)\\s*/g, '').trim()\r\n : cp.item}\r\n
\r\n \r\n
\r\n \r\n {serviceType === 'SALDOS A FAVOR DDV'\r\n ? cp?.item.match(/\\(([^)]+)\\)/)[1]\r\n : `$${cp.unit_value}`}\r\n
\r\n \r\n
\r\n {cp.quantity}
\r\n \r\n
\r\n \r\n ${cp.total}
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {serviceType.split(\" (\")[0] === 'INTERESES DE MORA' \r\n ? 'Total adeudado' \r\n : 'Subtotal'}\r\n
\r\n \r\n
\r\n \r\n {(\r\n invoiceDetailsContent?.content?.length &&\r\n invoiceDetailsContent?.content[0]?.subtotal_concepts && \r\n\r\n invoiceDetailsContent.content[0].subtotal_concepts[serviceType]) ?\r\n `$${invoiceDetailsContent.content[0].subtotal_concepts[serviceType]}` \r\n : ''}\r\n
\r\n \r\n {c.creg_1050072024 === \"upper_deviation\" && (\r\n
\r\n ))}\r\n \r\n
\r\n )}\r\n\r\n {c.creg_1050072024_r === \"upper_deviation\" && (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {c.creg_1050072024 === \"upper_deviation\" ? (\r\n
\r\n \r\n {props.language.invoice_content_text_creg_resolulion}\r\n {props.language.invoice_content_creg_resolution_text_1_first} ({c.consumption} kWh).{props.language.invoice_content_creg_resolution_text_1_second} {c.consumption_month} ({c.creg_1050072024_consumption} kWh) {props.language.invoice_content_creg_resolution_text_1_third} {c.difference_abs} {props.language.invoice_content_creg_resolution_text_1_fourth}.\r\n
\r\n ) : (\r\n\r\n {props.language.invoice_content_text_creg_resolulion}\r\n {props.language.invoice_content_creg_resolution_text_2_first} ({c.consumption} kWh). {props.language.invoice_content_creg_resolution_text_2_second} ({c.creg_1050072024_consumption} kWh), {props.language.invoice_content_creg_resolution_text_2_third}.\r\n
\r\n )}\r\n\r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {c.creg_1050072024_r_state === \"no_collect\" ? (\r\n c.creg_1050072024_r === \"upper_deviation\" ? (\r\n null\r\n ) : (\r\n
\r\n \r\n {props.language.invoice_content_text_creg_resolulion} \r\n {props.language.invoice_content_creg_resolution_r_text_3_first} {c.creg_1050072024_r_consumption_v0} {props.language.invoice_content_creg_resolution_r_text_3_second} {c.consumption_month_r}.\r\n
\r\n )\r\n ) : c.creg_1050072024_r_state === \"yes_collect\" ? (\r\n c.creg_1050072024_r === \"upper_deviation\" ? (\r\n\r\n {props.language.invoice_content_text_creg_resolulion} \r\n {props.language.invoice_content_creg_resolution_r_text_4_first} {Math.abs(parseFloat(c.creg_1050072024_r_consumption_v0) - parseFloat(c.creg_1050072024_r_consumption)).toFixed(2)} kWh {props.language.invoice_content_creg_resolution_r_text_4_second} {c.consumption_month_r}.\r\n
\r\n ) : (\r\n null\r\n )\r\n ) : null}\r\n\r\n
\r\n {c.notices && c.notices.length > 0 ?\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_billing_charges}
\r\n \r\n
\r\n ${c.charges}
\r\n \r\n
\r\n {c.negative_balance !== '0' ? (\r\n \r\n
\r\n {props.language.invoice_content_text_iva}
\r\n \r\n
\r\n ${c.iva}
\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n {props.language.invoice_content_text_negative_balance}
\r\n \r\n
\r\n ${c.negative_balance}
\r\n \r\n
\r\n {c.capital && (\r\n \r\n
\r\n {props.language.invoice_content_text_subtotal}
\r\n \r\n
\r\n ${c.subtotal}
\r\n \r\n
\r\n )}\r\n \r\n
\r\n {props.language.invoice_content_text_capital_record}
\r\n \r\n
\r\n ${c.payments_capital}
\r\n \r\n
\r\n {c.new_negative_balance !== '0' ? (\r\n \r\n
\r\n {`${props.language.invoice_content_text_total} de la factura ${c.bill}`}
\r\n \r\n
\r\n ${c.total}
\r\n \r\n
\r\n ) : null}\r\n \r\n
\r\n {props.language.invoice_content_text_new_negative_balance}
\r\n \r\n
\r\n ${c.new_negative_balance}
\r\n \r\n
\r\n : null\r\n }\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Importante\r\n {c.notices}\r\n
\r\n \r\n \r\n ![\"banner-user-data-update\"](\"http://neu-public.s3.sa-east-1.amazonaws.com/images/banner_factura_V2_P2.png\")
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_support}
\r\n soporte@erco.energy
\r\n \r\n
\r\n {props.language.power_factor_label_phase} {props.language.invoices_account_total_selection_separator} {props.language.invoice_content_text_support_emergency}
\r\n (+57) 601 6659652
\r\n \r\n
\r\n {props.language.invoice_content_text_footer_page}
\r\n 2/3
\r\n \r\n
\r\n \r\n {invoiceDetailsContent.content.map((c, index) => (\r\n ))}\r\n
\r\n\r\n Impreso por CENET SA NIT 830057860 - MISFACTURAS | {c.dian_resolution}
\r\n \r\n
\r\n {c.creg_0152018_month && (\r\n \r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_bill}
\r\n {c.bill}
\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_interruption_duration}
\r\n {props.language.invoice_content_text_interruption_duration_unit}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {[100, 75, 50, 25, 0].map((number, index) => (\r\n
\r\n \r\n {number}\r\n
\r\n ))}\r\n \r\n {Array.from({ length: 12 }).map((_, index) => (\r\n
\r\n -
\r\n ))}\r\n \r\n
\r\n {c.diug_pixels}
\r\n \r\n DIUG
\r\n \r\n
\r\n {c.diu_pixels}
\r\n \r\n DIU
\r\n \r\n
\r\n {c.dium_pixels}
\r\n \r\n DIUM
\r\n \r\n
\r\n {c.thc_pixels}
\r\n \r\n THC
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_interruption_frequency}
\r\n {props.language.invoice_content_text_interruption_frequency_unit}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {[100, 75, 50, 25, 0].map((number, index) => (\r\n
\r\n \r\n {number}\r\n
\r\n ))}\r\n \r\n {Array.from({ length: 12 }).map((_, index) => (\r\n
\r\n -
\r\n ))}\r\n \r\n
\r\n {c.fiug_pixels}
\r\n \r\n FIEG
\r\n \r\n
\r\n {c.fiu_pixels}
\r\n \r\n FIU
\r\n \r\n
\r\n {c.fium_pixels}
\r\n \r\n FIUM
\r\n \r\n
\r\n {c.tvc_pixels}
\r\n \r\n TVC
\r\n \r\n
\r\n \r\n
\r\n GRUPO: {c.quality_group}
\r\n DT: {c.dt}
\r\n \r\n
\r\n HC: {c.hc}
\r\n CF: {c.cf}
\r\n \r\n
\r\n VC: {c.vc}
\r\n MC: {c.mc}
\r\n \r\n
\r\n CEC: {c.cec}
\r\n MF: {c.mf}
\r\n \r\n
\r\n %t: {c.pdt}
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_pay_methods}
\r\n {props.language.invoice_content_text_app_web_payment}
\r\n {props.language.invoice_content_text_app_web_payment_description} ENRG {props.language.invoice_content_text_web_payment_description} erco.energy.
\r\n \r\n
\r\n \r\n
\r\n \r\n 
\r\n 
\r\n 
\r\n
\r\n {props.language.invoice_content_text_debit_card} o crédito
\r\n \r\n 
\r\n
\r\n {props.language.invoice_content_text_PSE}
\r\n {props.language.invoice_content_text_payment_methods}
\r\n \r\n
\r\n \r\n \r\n
\r\n {props.language.invoice_content_text_pay_wire_transfer}
\r\n \r\n {props.language.invoice_content_text_bank_payment_instructions} 24500012793 {props.language.invoice_content_text_bank_account_name} cartera-clientes@erco.energy {props.language.invoice_content_text_related}.\r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_legal_info}
\r\n \r\n {props.language.invoice_content_first_text_legal_info}\r\n {props.language.invoice_content_second_text_legal_info}\r\n {props.language.invoice_content_third_text_legal_info} www.neu.com.co, {props.language.invoice_content_fourth_text_legal_info}\r\n {props.language.invoice_content_fifth_text_legal_info} www.neu.com.co {props.language.invoice_content_sixth_text_legal_info}\r\n {props.language.invoice_content_seventh_text_legal_info}\r\n {props.language.invoice_content_eighth_text_legal_info}\r\n
\r\n \r\n
\r\n\r\n {/* CUFE */}\r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_verify_invoice_validity}
\r\n {props.language.invoice_content_text_verify_invoice_description}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n 1.
\r\n Escanea{props.language.invoice_content_text_scan_qr}.
\r\n \r\n
\r\n 2.
\r\n Verifica{props.language.invoice_content_text_verify_information}.
\r\n \r\n
\r\n 3.
\r\n Paga tu factura{props.language.invoice_content_text_pay_invoice}.
\r\n \r\n {(() => {\r\n const encryptedId = encryptId(c.bill, secretKey);\r\n const encryptedLink = `${baseLink}/${encryptedId}`;\r\n return (\r\n
\r\n \r\n
\r\n \r\n
\r\n NEU ENERGY S.A.S E.S.P - 901302727-0
\r\n {props.language.invoice_content_text_taxes}
\r\n {props.language.invoice_content_text_address}: Carrera 49 #61SUR - 540
\r\n {props.language.invoice_content_text_payment_way}: {props.language.invoice_content_text_payment_cash}
\r\n {props.language.invoice_content_text_payment_method}: {props.language.invoice_content_text_debit_card}
\r\n {props.language.invoice_content_text_ica_tax}
\r\n {props.language.invoice_content_text_large_taxpayers}: {props.language.invoice_content_text_large_taxpayers_resolution}
\r\n {props.language.invoice_content_text_income_tax_withholder}: {props.language.invoice_content_text_income_tax_resolution}
\r\n {props.language.invoice_content_text_ica_medellin_withholder}: {props.language.invoice_content_text_ica_medellin_resolution}
\r\n \r\n
\r\n \r\n 
\r\n
\r\n Juan Esteban Hincapie
\r\n Representante legal
\r\n NEU Energy S.A.S E.S.P
\r\n \r\n 
\r\n
\r\n \r\n
\r\n CUFE: {c.cufe}
\r\n \r\n \r\n ![\"banner-user-data-update\"](\"http://neu-public.s3.sa-east-1.amazonaws.com/images/banner_factura_V2_P3.png\")
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {props.language.invoice_content_text_support}
\r\n soporte@erco.energy
\r\n \r\n
\r\n {props.language.power_factor_label_phase} {props.language.invoices_account_total_selection_separator} {props.language.invoice_content_text_support_emergency}
\r\n (+57) 601 6659652
\r\n \r\n
\r\n {props.language.invoice_content_text_footer_page}
\r\n 3/3
\r\n \r\n {invoiceShow ?\r\n
\r\n \r\n )\r\n\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n language: state.shared.language,\r\n invoiceShow: state.invoices.invoiceDetails,\r\n theme: state.theme.theme,\r\n ...ownProps\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n downloadInvoiceAsync: (payload) => dispatch(invoicesActions.downloadInvoiceAsync(payload)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(InvoiceModal);","import React from 'react';\r\n\r\nimport { addHours, format } from 'date-fns';\r\nimport { es } from 'date-fns/locale';\r\n\r\nimport { connect } from 'react-redux';\r\n\r\nimport ContentLoader from 'react-content-loader';\r\n\r\nimport * as invoicesActions from \"../../store/actions/Invoices\";\r\n\r\nimport { themes } from '../../utils/enums';\r\nimport { track } from '@amplitude/analytics-browser';\r\n\r\nfunction InvoiceTable(props) {\r\n\r\n const language = props.language\r\n const moreInvoicesLoading = props.moreInvoicesLoading\r\n const invoicesSummary = props.invoicesSummary\r\n const sortField = props.sortField\r\n const sortOrder = props.sortOrder;\r\n const groupedData = props.groupedData;\r\n const cleanDate = props.cleanDate;\r\n const theme = props.theme;\r\n\r\n const setInvoices = props.setInvoices;\r\n const setInvoicesSummary = props.setInvoicesSummary;\r\n const setCurrentPage = props.setCurrentPage\r\n const setSortField = props.setSortField\r\n const setSortOrder = props.setSortOrder;\r\n const setEmptyPaginationResult = props.setEmptyPaginationResult;\r\n const handleOpenModal = props.handleOpenModal;\r\n\r\n const formatNumber = (value) => {\r\n if (value === 0 || value === undefined || value === null) return \"0\";\r\n const string_value = value?.toString();\r\n if (!string_value.includes(\".\")) {\r\n return string_value.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n }\r\n const values_part = string_value.split(\".\");\r\n const integerValue = values_part[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n const decimalValue = values_part[1].slice(0, 2);\r\n return `${integerValue}.${decimalValue}`;\r\n };\r\n\r\n const getMonthName = (date) => {\r\n const currentDate = new Date(date);\r\n const stringMonth = format(currentDate, 'MMMM', { locale: es });\r\n return stringMonth[0].toUpperCase() + stringMonth.slice(1, stringMonth.length);\r\n }\r\n\r\n const toggleInvoiceSelection = (invoice) => {\r\n if (invoice.state === 1) return;\r\n if (moreInvoicesLoading || invoice.loadingDelay) return;\r\n setInvoices(prevState => (\r\n prevState.map(currentInvoice => {\r\n if (currentInvoice.id_bill !== invoice.id_bill || currentInvoice.loadingDelay) return currentInvoice;\r\n if (currentInvoice.id_bill === invoice.id_bill) {\r\n const newIsSelected = !currentInvoice.isSelected;\r\n const newTotalConsumption = newIsSelected ? invoicesSummary.total_consumption + parseFloat(currentInvoice.consumption) : invoicesSummary.total_consumption - parseFloat(currentInvoice.consumption)\r\n const newTotalPayment = newIsSelected ? invoicesSummary.total_payment + parseFloat(currentInvoice.total_payment) : invoicesSummary.total_payment - parseFloat(currentInvoice.total_payment)\r\n setInvoicesSummary({\r\n ...invoicesSummary,\r\n total_consumption: parseFloat(parseFloat(newTotalConsumption).toFixed(2)),\r\n total_payment: parseFloat(parseFloat(newTotalPayment).toFixed(2)),\r\n id_bills_array: invoicesSummary.id_bills_array.map(bill => ({...bill, selected: bill.value === currentInvoice.id_bill ? newIsSelected : bill.selected}))\r\n })\r\n newIsSelected && track('Project bill selected', {Project_ID: invoice.id_service})\r\n return { ...currentInvoice, isSelected: !currentInvoice.isSelected }\r\n };\r\n return currentInvoice;\r\n })\r\n ))\r\n }\r\n\r\n const accountHeaderTemplate = (account) => (\r\n \r\n
: null}\r\n {!props.invoiceUrl ? \r\n \r\n
\r\n \r\n {/* */}\r\n
\r\n {invoiceShow.service_name}
\r\n \r\n {props.language.invoices_title_section_bills} {invoiceShow.reference}
\r\n \r\n \r\n {!props.invoiceUrl ?\r\n : null}\r\n \r\n
\r\n \r\n
:\r\n \r\n \r\n
}\r\n \r\n
\r\n {account}
\r\n \r\n \r\n
\r\n \r\n
\r\n {getMonthName(date)}
\r\n\r\n \r\n
\r\n \r\n {\r\n !rowData.loadingDelay ? (\r\n rowData.state !== 1 ? (\r\n { toggleInvoiceSelection(rowData) }}\r\n >\r\n \r\n ) : (\r\n
\r\n )\r\n };\r\n\r\n const invoiceReferenceTemplate = (rowData) => {\r\n const backgroundColor = rowData.isSelected ? 'surface-bg-on-surface' : 'surface-bg-on-surface-alpha'\r\n return (\r\n {rowData.service_name}
\r\n\r\n
\r\n )\r\n };\r\n\r\n const invoiceTariffTemplate = (rowData) => {\r\n const surfaceBgOnSurface = theme === 'dark' ? '#262626' : '#fafafa';\r\n const surfaceBgOnSurfaceAlpha = theme === 'dark' ? '#ffffff0a' : '#1414140a';\r\n const backgroundColor = rowData.isSelected ? 'surface-bg-on-surface' : 'surface-bg-on-surface-alpha'\r\n\r\n return (\r\n {rowData.reference}
\r\n\r\n {\r\n rowData.loadingDelay ? (\r\n
\r\n )\r\n };\r\n\r\n const invoiceConsumptionTemplate = (rowData) => {\r\n const surfaceBgOnSurface = theme === 'dark' ? '#262626' : '#fafafa';\r\n const surfaceBgOnSurfaceAlpha = theme === 'dark' ? '#ffffff0a' : '#1414140a';\r\n const backgroundColor = rowData.isSelected ? 'surface-bg-on-surface' : 'surface-bg-on-surface-alpha'\r\n return (\r\n \r\n
\r\n ) : (\r\n \r\n \r\n \r\n
\r\n ${formatNumber(rowData.tariff)}
\r\n )\r\n }\r\n\r\n {\r\n rowData.loadingDelay ? (\r\n
\r\n )\r\n };\r\n\r\n const statusTemplate = (rowData) => {\r\n const surfaceBgOnSurface = theme === 'dark' ? '#262626' : '#fafafa';\r\n const surfaceBgOnSurfaceAlpha = theme === 'dark' ? '#ffffff0a' : '#1414140a';\r\n const backgroundColor = rowData.isSelected ? 'surface-bg-on-surface' : 'surface-bg-on-surface-alpha'\r\n let value = rowData.state;\r\n let expiration = new Date(rowData.date_expiration);\r\n let state_string;\r\n let color;\r\n let bg_color;\r\n let border;\r\n\r\n switch (value) {\r\n case 0:\r\n if (expiration < new Date()) {\r\n state_string = language.invoices_state_overdue;\r\n color = 'content-color-red';\r\n bg_color = 'bg-alpha-red-32';\r\n border = 'border-color-red'\r\n } else {\r\n state_string = language.invoices_state_pending;\r\n color = 'content-color-orange';\r\n bg_color = 'bg-alpha-orange-32';\r\n border = 'border-color-orange'\r\n }\r\n break;\r\n case 1:\r\n state_string = language.invoices_state_paid;\r\n color = 'content-color-green';\r\n bg_color = 'bg-alpha-primary-brand-32';\r\n border = 'border-color-green'\r\n break;\r\n default:\r\n break;\r\n }\r\n return (\r\n \r\n
\r\n ) : (\r\n \r\n \r\n \r\n
\r\n {formatNumber(rowData.consumption)} {language.invoices_table_consumption_unit}
\r\n )\r\n }\r\n\r\n {\r\n rowData.loadingDelay ? (\r\n
\r\n )\r\n };\r\n\r\n const invoicePayTemplate = (rowData) => {\r\n const surfaceBgOnSurface = theme === 'dark' ? '#262626' : '#fafafa';\r\n const surfaceBgOnSurfaceAlpha = theme === 'dark' ? '#ffffff0a' : '#1414140a';\r\n const backgroundColor = rowData.isSelected ? 'surface-bg-on-surface' : 'surface-bg-on-surface-alpha'\r\n const value = rowData.total_payment\r\n let formattedTotalPayment;\r\n if (value === 0 || value === undefined || value === null) {\r\n formattedTotalPayment = \"0\"\r\n } else {\r\n const string_value = value?.toString();\r\n if (!string_value.includes(\".\")) {\r\n formattedTotalPayment = string_value.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n } else {\r\n const values_part = string_value.split(\".\");\r\n const integerValue = values_part[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n const decimalValue = values_part[1].slice(0, 2);\r\n formattedTotalPayment = `${integerValue}.${decimalValue}`;\r\n }\r\n };\r\n return (\r\n \r\n
\r\n ) : (\r\n \r\n \r\n \r\n
\r\n {state_string}
\r\n )\r\n }\r\n \r\n {\r\n rowData.loadingDelay ? (\r\n
\r\n )\r\n };\r\n\r\n const invoiceDetailTemplate = (rowData, accountIndex, dateGroupIndex, invoiceIndex) => {\r\n const backgroundColor = rowData.isSelected ? 'surface-bg-on-surface' : 'surface-bg-on-surface-alpha'\r\n const expiratioDnate = addHours(new Date(rowData.date_expiration), 5);\r\n const stringDate = format(expiratioDnate, 'dd MMMM', { locale: es })\r\n const separatedDate = stringDate.split(' ')\r\n\r\n return (\r\n \r\n
\r\n ) : (\r\n \r\n \r\n \r\n
\r\n ${formattedTotalPayment}
\r\n )\r\n }\r\n\r\n {\r\n track('Bill opened')\r\n e.stopPropagation();\r\n handleOpenModal(rowData, accountIndex, dateGroupIndex, invoiceIndex)\r\n }}>\r\n \r\n
\r\n \r\n )\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n {separatedDate[0]} de {separatedDate[1]}
\r\n\r\n {/* */}\r\n \r\n \r\n
\r\n {\r\n (!moreInvoicesLoading && groupedData.length === 0) ? (\r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state, props) => ({\r\n language: state.shared.language,\r\n invoicesSummary: state.invoices.invoicesSummary,\r\n moreInvoicesLoading: state.invoices.moreInvoicesLoading,\r\n sortField: state.invoices.sortField,\r\n sortOrder: state.invoices.sortOrder,\r\n theme: state.theme.theme,\r\n ...props\r\n})\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n setInvoicesSummary: (payload) =>\r\n dispatch(invoicesActions.setInvoicesSummary(payload)),\r\n setCurrentPage: (payload) =>\r\n dispatch(invoicesActions.setCurrentPage(payload)),\r\n setSortField: (payload) =>\r\n dispatch(invoicesActions.setSortField(payload)),\r\n setSortOrder: (payload) =>\r\n dispatch(invoicesActions.setSortOrder(payload)),\r\n setEmptyPaginationResult: (payload) =>\r\n dispatch(invoicesActions.setEmptyPaginationResult(payload))\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(InvoiceTable)","import React from \"react\";\r\n\r\nimport { connect } from \"react-redux\";\r\n\r\nimport ContentLoader from \"react-content-loader\";\r\n\r\nimport PseIconDark from '../../imgs/pse-logo-dark.svg'\r\nimport PseIconLight from '../../imgs/pse-logo-light.svg'\r\nimport VisaIconDark from '../../imgs/visa-logo-dark.svg'\r\nimport VisaIconLight from '../../imgs/visa-logo-light.svg'\r\n\r\nimport * as invoicesActions from \"../../store/actions/Invoices\";\r\nimport { themes } from \"../../utils/enums\";\r\nimport { track } from \"@amplitude/analytics-browser\";\r\n\r\nconst InvoiceSummary = (props) => {\r\n\r\n let theme = props.theme;\r\n let _invoices = props.invoices;\r\n let invoicesSummary = props.invoicesSummary;\r\n let invoicesSummaryLoading = props.invoicesSummaryLoading;\r\n let invoicesLoading = props.invoicesLoading;\r\n let selectAll = props.selectAll;\r\n let allAccountsSelected = props.allAccountsSelected;\r\n let filterPendingInvoices = props.filterPendingInvoices;\r\n let notSelectedPedingInvoices = _invoices.filter(currentInvoice => !currentInvoice.loadingDelay && currentInvoice.state === 0 && !currentInvoice.isSelected).length\r\n let selectedPedingInvoicesArray = _invoices.filter(currentInvoice => !currentInvoice.loadingDelay && currentInvoice.state === 0 && currentInvoice.isSelected)\r\n let selectedPedingInvoices = selectedPedingInvoicesArray.length\r\n let totalConsumption = selectAll ? invoicesSummary.total_consumption : selectedPedingInvoicesArray.reduce((accum, i) => accum + parseFloat(i.consumption), 0);\r\n let totalPayment = selectAll ? invoicesSummary.total_payment : selectedPedingInvoicesArray.reduce((accum, i) => accum + parseFloat(i.total_payment), 0);\r\n let dynamicPedingInvoices = selectAll ? notSelectedPedingInvoices : invoicesSummary.total_bills - selectedPedingInvoices\r\n let dynamicSelectedPedingInvoices = selectAll ? (invoicesSummary.total_bills - notSelectedPedingInvoices) : (selectedPedingInvoices);\r\n\r\n const toggleSelectAll = props.toggleSelectAll;\r\n const setShowPay = props.setShowPay;\r\n const handleFilterPendingInvoices = props.handleFilterPendingInvoices;\r\n\r\n const formatNumber = (value) => {\r\n if (value === 0 || value === undefined || value === null) return \"0\";\r\n const string_value = value?.toString();\r\n if (!string_value.includes(\".\")) {\r\n return string_value.replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n }\r\n const values_part = string_value.split(\".\");\r\n const integerValue = values_part[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n const decimalValue = values_part[1].slice(0, 2);\r\n return `${integerValue}.${decimalValue}`;\r\n };\r\n\r\n return (\r\n | \r\n {language.invoices_table_service_name_header_title} \r\n {sortField !== 'service_name' && }\r\n {(sortField === 'service_name' && sortOrder > 0) && }\r\n {(sortField === 'service_name' && sortOrder < 0) && }\r\n \r\n | \r\n \r\n {language.invoices_table_reference_header_title} \r\n \r\n | \r\n \r\n \r\n \r\n \r\n \r\n {language.invoices_table_tariff_header_title} \r\n | \r\n \r\n \r\n \r\n \r\n \r\n {language.invoices_table_consumption_header_title} \r\n | \r\n \r\n \r\n \r\n \r\n \r\n {language.invoices_table_invoice_state_header_title} \r\n | \r\n \r\n \r\n \r\n \r\n \r\n { language.invoices_table_total_payment_header_title } \r\n | \r\n \r\n \r\n \r\n \r\n \r\n { language.invoices_table_expiration_date_header_title } \r\n | \r\n
|---|---|---|---|---|---|---|
| {invoiceServiceNameTemplate(invoice)} | \r\n{invoiceReferenceTemplate(invoice)} | \r\n{invoiceTariffTemplate(invoice)} | \r\n{invoiceConsumptionTemplate(invoice)} | \r\n{statusTemplate(invoice)} | \r\n{invoicePayTemplate(invoice)} | \r\n{invoiceDetailTemplate(invoice, accountIndex, dateGroupIndex, index)} | \r\n
| \r\n \r\n \r\n \r\n \r\n | \r\n ||||||
| \r\n \r\n \r\n \r\n \r\n | \r\n ||||||
| \r\n \r\n \r\n \r\n \r\n | \r\n
\r\n
\r\n ) : <>\r\n }\r\n \r\n {\r\n theme === themes.DARK ? (\r\n \r\n ) : (\r\n \r\n )\r\n }\r\n
\r\n \r\n { language.invoices_empty_state }\r\n
\r\n\r\n {\r\n !invoicesLoading ? (\r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n ...ownProps,\r\n invoicesLoading: state.invoices.invoicesLoading,\r\n invoicesSummary: state.invoices.invoicesSummary,\r\n invoicesSummaryLoading: state.invoices.invoicesSummaryLoading,\r\n language: state.shared.language,\r\n theme: state.theme.theme,\r\n})\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n setInvoicesToPay: (payload) =>\r\n dispatch(invoicesActions.setInvoicesToPay(payload)),\r\n setShowPay: (payload) =>\r\n dispatch(invoicesActions.setShowPay(payload))\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(InvoiceSummary);\r\n","import React, { useEffect, useState } from 'react';\r\n\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as servicesActions from \"../../../store/actions/Services\";\r\nimport * as invoicesActions from \"../../../store/actions/Invoices\";\r\n\r\nimport { Transition } from 'react-transition-group';\r\nimport { track } from '@amplitude/analytics-browser';\r\n\r\nconst AccountDrawer = (props) => {\r\n\r\n const _totalAccounts = props.totalAccounts;\r\n const _totalServices = props.totalServices;\r\n const activeServicesEnergy = props.activeServicesEnergy;\r\n const openAccountDrawer = props.openAccountDrawer;\r\n const accountPickerRef = props.accountPickerRef;\r\n const theme = props.theme;\r\n const fromEnergyAccount = props.fromEnergyAccount;\r\n\r\n const handleClose = props.handleClose;\r\n const setActiveServicesInvoices = props.setActiveServicesInvoices;\r\n const setCurrentPage = props.setCurrentPage;\r\n const setEmptyPaginationResult = props.setEmptyPaginationResult;\r\n\r\n const [energyAccounts, setEnergyAccounts] = useState([]);\r\n const [totalAccounts, setTotalAccounts] = useState([]);\r\n const [search, setSearch] = useState('');\r\n\r\n let allAccountsSelected = totalAccounts.every(a => a.isSelected);\r\n\r\n const toggleSelectedAccount = (id_account) => {\r\n setTotalAccounts(totalAccounts.map(currentAccount => currentAccount.idAccount !== id_account ? currentAccount : ({ ...currentAccount, isSelected: !currentAccount.isSelected })))\r\n track('Billing account selected')\r\n }\r\n\r\n const onSaveChanges = () => {\r\n const deselectedAccounts = totalAccounts\r\n .filter(currentAccount => !currentAccount.isSelected)\r\n .map(currentAccount => currentAccount.idAccount);\r\n const energyAccountsIds = energyAccounts\r\n .map(currentAccount => currentAccount.idAccount)\r\n const newActiveServicesInvoices = [..._totalServices];\r\n setCurrentPage(0)\r\n setEmptyPaginationResult(false)\r\n setActiveServicesInvoices(\r\n newActiveServicesInvoices.filter(currentService =>\r\n !deselectedAccounts.some(currentIdAccount => currentService.idAccount === currentIdAccount)\r\n &&\r\n energyAccountsIds.some(currentIdAccount => currentService.idAccount === currentIdAccount)\r\n )\r\n )\r\n\r\n handleClose()\r\n }\r\n\r\n const toggleSelectAll = (allSelected) => {\r\n !allAccountsSelected && track('Billing all account selected')\r\n setTotalAccounts(prevState => prevState.map(currentAccount => ({ ...currentAccount, isSelected: !allSelected })))\r\n }\r\n\r\n const normalizeText = (text) => {\r\n return text.normalize(\"NFD\").replace(/[\\u0300-\\u036f]/g, \"\")\r\n }\r\n\r\n useEffect(() => {\r\n if (!_totalAccounts || _totalAccounts.length === 0) {\r\n setTotalAccounts([])\r\n return;\r\n }\r\n const activeServicesEnergyAccountIds = activeServicesEnergy.map(s => s.account?.idAccount);\r\n const energyAccounts = _totalAccounts.filter(currentAccount => currentAccount.typeservices.includes('energy'))\r\n setEnergyAccounts(energyAccounts)\r\n const normalizedAccounts = energyAccounts.map(currentAccount => ({\r\n ...currentAccount,\r\n isSelected: (fromEnergyAccount && activeServicesEnergyAccountIds.length > 0) ? activeServicesEnergyAccountIds.includes(currentAccount.idAccount) : true,\r\n visible: true\r\n }))\r\n setTotalAccounts(normalizedAccounts)\r\n // eslint-disable-next-line\r\n }, [_totalAccounts, fromEnergyAccount])\r\n\r\n useEffect(() => {\r\n if (!search || search.length === 0) {\r\n setTotalAccounts(prevState => prevState.map(currentAccount => ({ ...currentAccount, visible: true })))\r\n } else {\r\n setTotalAccounts(prevState => prevState.map(currentAccount => ({ \r\n ...currentAccount, \r\n visible: normalizeText(currentAccount.name)\r\n .toLowerCase()\r\n .includes(normalizeText(search.toLowerCase())) \r\n })))\r\n }\r\n }, [search])\r\n\r\n return (\r\n \r\n {\r\n !invoicesSummaryLoading ? (\r\n <>\r\n
\r\n ) : (\r\n \r\n
\r\n {\r\n !allAccountsSelected ? (\r\n {props.language.invoices_summary_title}
\r\n{ dynamicPedingInvoices === 0 && track('Select all bills button clicked'); toggleSelectAll()}}>{dynamicSelectedPedingInvoices > 0 ? props.language.invoices_summary_deselect_all_services : props.language.invoices_summary_select_all_services }
\r\n{props.language.invoices_summary_account_filter_alert_before_bold}{props.language.invoices_summary_account_filter_alert_bold}{props.language.invoices_summary_account_filter_alert_after_bold}
\r\n ) : <>\r\n }\r\n \r\n )\r\n : <>\r\n }\r\n\r\n {\r\n invoicesSummaryLoading ? (\r\n <>\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {props.language.invoices_selected_invoices_summary_title}
\r\n\r\n
\r\n {dynamicSelectedPedingInvoices}
\r\n{props.language.invoices_summary_invoices_unit}
\r\n{ track('Pending bills button selected'); handleFilterPendingInvoices(!filterPendingInvoices)}}>\r\n
\r\n \r\n \r\n
\r\n {\r\n invoicesSummary.total_bills !== 0 && dynamicSelectedPedingInvoices === 0 ? (\r\n {props.language.invoices_pending_invoices_summary_title}
\r\n\r\n
\r\n ) : invoicesSummary.total_bills !== 0 && dynamicPedingInvoices === 0 ? (\r\n \r\n
\r\n \r\n {props.language.invoices_state_pending}\r\n
\r\n \r\n
\r\n {invoicesSummary.pending_bills}
\r\n{props.language.invoices_summary_invoices_unit}
\r\n\r\n
\r\n \r\n {props.language.invoices_state_overdue}\r\n
\r\n \r\n
\r\n {invoicesSummary.total_bills - invoicesSummary.pending_bills}
\r\n{props.language.invoices_summary_invoices_unit}
\r\n\r\n
\r\n ) : (\r\n {props.language.invoices_empty_summary_pending_invoices}
\r\n\r\n
\r\n )\r\n }\r\n {dynamicPedingInvoices}
\r\n{props.language.invoices_summary_invoices_unit}
\r\n\r\n
\r\n \r\n )\r\n }\r\n \r\n \r\n
\r\n {props.language.invoices_summary_consumption_selected_title}
\r\n\r\n
\r\n {totalConsumption < 0 ? 0 : formatNumber(totalConsumption)}
\r\n{props.language.invoices_summary_consumption_selected_unit}
\r\n\r\n
\r\n )\r\n }\r\n {\r\n invoicesLoading || invoicesSummaryLoading ? (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n ) : <>\r\n }\r\n {\r\n !invoicesLoading && !invoicesSummaryLoading && invoicesSummary.total_bills === 0 ? (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n ) : <>\r\n }\r\n {\r\n !invoicesLoading && !invoicesSummaryLoading && invoicesSummary.total_bills !== 0 ? (\r\n \r\n \r\n
\r\n \r\n {props.language.invoices_summary_not_pending_invoices_first_content} { props.language.invoices_summary_not_pending_invoices_second_content }\r\n
\r\n\r\n
\r\n ) : <>\r\n }\r\n \r\n
\r\n \r\n \r\n
\r\n {props.language.invoices_summary_total_payment_title}
\r\n\r\n {totalPayment <= 0 &&
\r\n $0
}\r\n {totalPayment !== 0 &&${formatNumber(totalPayment)}
}\r\n{props.language.invoices_summary_total_payment_unit}
\r\n\r\n {\r\n if (dynamicSelectedPedingInvoices === 0) return;\r\n setShowPay(true);\r\n }}\r\n >\r\n \r\n
\r\n {dynamicSelectedPedingInvoices !== 0 ? props.language.invoices_summary_total_payment_pay : props.language.invoices_summary_total_payment_empty}
\r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n {/* */}\r\n
\r\n )}\r\n \r\n )\r\n}\r\n\r\nconst mapStateToProps = (state, props) => ({\r\n totalAccounts: state.accounts.totalAccounts,\r\n totalServices: state.services.totalServices,\r\n activeServicesEnergy: state.services.activeServicesEnergy,\r\n theme: state.theme.theme,\r\n language: state.shared.language,\r\n ...props\r\n})\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n setActiveServicesInvoices: (payload) =>\r\n dispatch(servicesActions.setActiveServicesInvoices(payload)),\r\n setCurrentPage: (payload) =>\r\n dispatch(invoicesActions.setCurrentPage(payload)),\r\n setEmptyPaginationResult: (payload) =>\r\n dispatch(invoicesActions.setEmptyPaginationResult(payload))\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AccountDrawer);","import * as pays from '../creators/Pays';\r\n\r\nimport { SETData, GETData } from '../../services/WebServices';\r\n\r\nimport { Alert } from 'rsuite';\r\n\r\nexport const setBanks = payload => {\r\n return {\r\n type: pays.SET_PAYS_BANKS,\r\n payload\r\n }\r\n}\r\n\r\nexport const setInvoicesToPay = payload => {\r\n return {\r\n type: pays.SET_PAYS_INVOICES_TO_PAY,\r\n payload\r\n }\r\n}\r\n\r\nexport const setTypeComponent = payload => {\r\n return {\r\n type: pays.SET_PAYS_TYPE_COMPONENT,\r\n payload\r\n }\r\n}\r\n\r\nexport const setInfoPayment = payload => {\r\n return {\r\n type: pays.SET_PAYS_INFO_PAYMENT,\r\n payload\r\n }\r\n}\r\n\r\nexport const setPaymentLoading = payload => {\r\n return {\r\n type: pays.SET_PAYS_PAYMENT_LOADING,\r\n payload\r\n }\r\n}\r\n\r\nexport const setPaymentMethods = payload => {\r\n return {\r\n type: pays.SET_PAYS_PAYMENT_METHODS,\r\n payload\r\n }\r\n}\r\n\r\nexport const setPaymentProvider = payload => {\r\n return {\r\n type: pays.SET_PAYS_PAYMENT_PROVIDER,\r\n payload\r\n }\r\n}\r\n\r\nexport const loadBankDataAsync = () => {\r\n return (dispatch) => { \r\n\r\n GETData(\"payvalida/banks\", \"GET\") \r\n .then(response => { \r\n if (response !== null) { \r\n dispatch(setBanks(response.DATA)); \r\n } \r\n })\r\n .catch(response => console.error(response));\r\n\r\n }\r\n}\r\nexport const loadPaymentMethodsAsync = () => {\r\n return (dispatch) => {\r\n\r\n GETData(\"payment/methods\", \"GET\") \r\n .then(response => { \r\n if (response !== null) { \r\n dispatch(setPaymentMethods(response)); \r\n } \r\n })\r\n .catch(response => console.error(response));\r\n\r\n }\r\n}\r\n\r\nexport const setPsePaymentAsync = (payload) => {\r\n return (dispatch, getState) => {\r\n\r\n let infoPayment = getState().pays.infoPayment;\r\n\r\n const language = getState().shared.language;\r\n\r\n const pseProvider = payload.pseProvider;\r\n\r\n infoPayment.id_bills = payload.id_bills_array.filter(bill => bill.selected).map(bill => bill.value);\r\n dispatch(setPaymentLoading(true));\r\n \r\n SETData(`${pseProvider}/pse/transaction`, \"POST\", infoPayment)\r\n .then(response => {\r\n if (response !== null) {\r\n window.location.assign(response.URL_BANK);\r\n } else {\r\n Alert.error(language.alert_submit_form_popup_failed);\r\n }\r\n })\r\n .catch(() => Alert.error(language.alert_submit_form_popup_failed))\r\n .finally(() => dispatch(setPaymentLoading(false)));\r\n }\r\n}\r\n\r\nexport const setCardPaymentAsync = (payload) => {\r\n return (dispatch, getState) => {\r\n\r\n let infoPayment = getState().pays.infoPayment;\r\n\r\n const language = getState().shared.language;\r\n\r\n infoPayment.id_bills = payload.id_bills_array.filter(bill => bill.selected).map(bill => bill.value);\r\n\r\n dispatch(setPaymentLoading(true));\r\n\r\n SETData(`openpay/card`, \"POST\", infoPayment)\r\n .then(response => {\r\n if (response.code === \"SUCCESS\") {\r\n\r\n window.location.assign(response.redirect_url);\r\n \r\n } else {\r\n\r\n let errorMessage = language[`invoices_card_payment_alert_${response.code.toLowerCase()}`] || language[\"alert_submit_form_popup_failed\"];\r\n\r\n Alert.error(errorMessage);\r\n }\r\n })\r\n .catch(() => Alert.error(language.alert_submit_form_popup_failed))\r\n .finally(() => dispatch(setPaymentLoading(false)));\r\n }\r\n}","import React from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as paysActions from '../../../store/actions/Pays';\r\n\r\nimport { themes } from '../../../utils/enums';\r\n\r\nimport PseDark from '../../../imgs/pse-logo-dark.svg'\r\nimport PseLight from '../../../imgs/pse-logo-light.svg'\r\n\r\nconst PaymentMethod = (props) => {\r\n\r\n let paymentMethods = props.paymentMethods;\r\n let theme = props.theme;\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n setSearch(target.value)}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n totalAccounts.filter(a => a.visible).map(currentAccount => (\r\n toggleSelectedAccount(currentAccount.idAccount)}\r\n >\r\n
\r\n ))\r\n }\r\n \r\n
\r\n {currentAccount.name}
\r\n {currentAccount.services.length} {props.language.invoices_accounts_services_selected_unit}
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n toggleSelectAll(allAccountsSelected)}\r\n >\r\n {!allAccountsSelected ? props.language.invoices_accounts_select_all : props.language.invoices_accounts_deselect_all }\r\n \r\n {\r\n e.stopPropagation()\r\n onSaveChanges()\r\n }}\r\n >\r\n
\r\n {props.language.invoices_accounts_done}
\r\n \r\n\r\n {\r\n paymentMethods.map(method =>\r\n
\r\n )\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n invoicesToPay: state.invoices.invoicesToPay,\r\n user: state.users.user,\r\n language: state.shared.language,\r\n paymentMethods: state.pays.paymentMethods,\r\n theme: state.theme.theme,\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n setTypeComponent: (payload) => dispatch(paysActions.setTypeComponent(payload)),\r\n setPaymentProvider: (payload) => dispatch(paysActions.setPaymentProvider(payload))\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(PaymentMethod)","import React, { useState, useEffect } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as paysActions from '../../../store/actions/Pays';\r\n\r\n// import cardTag from '../../../imgs/card-tag.svg';\r\n\r\nimport Input from '../../shared/utilities/Input';\r\nimport Select from '../../shared/utilities/Select';\r\nimport { themes } from '../../../utils/enums';\r\n\r\nconst isValidateString = val => {\r\n return /^(?=.*[a-zA-Zñíóáéú])[ñíóáéú a-zA-Z]+$/.test(val);\r\n}\r\n\r\nconst isValidUser = data => {\r\n\r\n if (data.phone === null || data.phone === \"\") {\r\n return false;\r\n }\r\n\r\n if (data.address === null || data.address === \"\") {\r\n return false;\r\n }\r\n\r\n if (data.id_document === null || data.id_document === \"\") {\r\n return false;\r\n }\r\n\r\n if (data.card_name === null || data.card_name === \"\" || !isValidateString(data.card_name)) {\r\n return false;\r\n }\r\n\r\n if (data.card_number === null || data.card_number === \"\") {\r\n return false;\r\n }\r\n\r\n if (data.card_expiration_month === null || data.card_expiration_month === \"\") {\r\n return false;\r\n }\r\n\r\n if (data.card_expiration_year === null || data.card_expiration_year === \"\") {\r\n return false;\r\n }\r\n\r\n if (data.card_cvv === null || data.card_cvv === \"\") {\r\n return false;\r\n }\r\n\r\n return true;\r\n\r\n}\r\n\r\nconst separarTexto = (texto) => {\r\n const expresionRegular = new RegExp('.{1,4}', 'g');\r\n const grupos = texto.match(expresionRegular);\r\n return grupos ? grupos.join(' ') : '';\r\n}\r\n\r\nlet fees = Array.from({ length: 36 }, (e, i) => { return { value: i + 1, label: i + 1 } });\r\n\r\nconst CardPayment = (props) => {\r\n\r\n let theme = props.theme;\r\n let account = props.account;\r\n let infoPayment = props.infoPayment;\r\n\r\n const setEnable = props.setEnable;\r\n const setInfoPayment = props.setInfoPayment;\r\n\r\n const initInfo = {\r\n id_user: props.user.idUser,\r\n id_external_user: 0,\r\n id_account: account?.idAccount,\r\n name: props.user.name,\r\n lastname: props.user.lastname,\r\n email: props.user.email,\r\n phone: props.user.phone,\r\n address: props.user.address,\r\n id_document: \"\",\r\n id_bills: [],\r\n card_name: \"\",\r\n card_number: \"\",\r\n card_expiration_year: \"\",\r\n card_expiration_month: \"\",\r\n card_cvv: \"\",\r\n payments: 1,\r\n neugets: 0,\r\n commission: 0.007,\r\n total_payment: props.totalPayment,\r\n }\r\n\r\n const [defaultInfo, setDefaultInfo] = useState(initInfo);\r\n\r\n useEffect(() => {\r\n if (defaultInfo != null) {\r\n setInfoPayment(defaultInfo)\r\n setDefaultInfo(null)\r\n }\r\n }, [defaultInfo, setInfoPayment]);\r\n\r\n useEffect(() => setEnable(isValidUser(infoPayment)), [setEnable, infoPayment]);\r\n\r\n return (\r\n { props.setTypeComponent(method.value); props.setPaymentProvider(method.provider); }}>\r\n
\r\n )\r\n }\r\n \r\n
\r\n \r\n \r\n {\r\n method.image.type === 'icon' ?\r\n :\r\n \r\n }\r\n
\r\n \r\n
\r\n {method.title}
\r\n {method.description}
\r\n \r\n
\r\n \r\n { props.language.invoices_pay_first_advice_payment_method }\r\n
\r\n\r\n { props.language.invoices_pay_second_advice_payment_method }\r\n
\r\n\r\n
\r\n )\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n infoPayment: state.pays.infoPayment,\r\n account: state.accounts.account,\r\n user: state.users.user,\r\n language: state.shared.language,\r\n setEnable: ownProps.setEnable,\r\n totalPayment: ownProps.totalPayment,\r\n theme: state.theme.theme,\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n setInfoPayment: (payload) => dispatch(paysActions.setInfoPayment(payload)),\r\n setCardPaymentAsync: () => dispatch(paysActions.setCardPaymentAsync())\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CardPayment)","import React, { useState, useEffect, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as invoicesActions from '../../../store/actions/Invoices';\r\nimport * as paysActions from '../../../store/actions/Pays';\r\n\r\nimport { Animation } from 'rsuite';\r\n\r\nimport Input from '../../shared/utilities/Input';\r\nimport Select from '../../shared/utilities/Select';\r\n\r\nconst isValidateEmail = email => {\r\n return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email);\r\n}\r\n\r\nconst isValidateString = val => {\r\n return /^[ñíóáéú a-zA-Z ]+$/.test(val);\r\n}\r\n\r\nconst isValidUser = (user, pseProvider) => {\r\n\r\n if (user.name === null || user.name === \"\" || !isValidateString(user.name)) {\r\n return false;\r\n }\r\n\r\n if (!isValidateEmail(user.email)) {\r\n return false;\r\n }\r\n\r\n if (user.phone === null || user.phone === \"\") {\r\n return false;\r\n }\r\n\r\n if (user.address === null || user.address === \"\") {\r\n return false;\r\n }\r\n\r\n if (user.id_document === null || user.id_document === \"\") {\r\n return false;\r\n }\r\n\r\n if ((user.financial_institution_code === null || user.financial_institution_code === \"0\") && pseProvider === 'payvalida') {\r\n return false;\r\n }\r\n\r\n return true;\r\n\r\n}\r\n\r\nconst PsePayment = (props) => {\r\n\r\n const userLegalTypes = [\r\n {\r\n label: props.language.invoices_pay_label_option_cc,\r\n value: \"CC\"\r\n },\r\n {\r\n label: props.language.invoices_pay_label_option_nit,\r\n value: \"NIT\",\r\n },\r\n {\r\n label: props.language.invoices_pay_label_option_ce,\r\n value: \"CE\"\r\n }\r\n ]\r\n \r\n const userTypes = [\r\n {\r\n label: props.language.invoices_pay_label_option_natural_user,\r\n value: \"N\"\r\n },\r\n {\r\n label: props.language.invoices_pay_label_option_legal_user,\r\n value: \"J\",\r\n }\r\n ]\r\n\r\n let account = props.account;\r\n let banks = props.banks;\r\n let infoPayment = props.infoPayment;\r\n let pseProvider = props.paymentProvider;\r\n let theme = props.theme;\r\n\r\n const setEnable = props.setEnable;\r\n const loadBankDataAsync = props.loadBankDataAsync;\r\n const setInfoPayment = props.setInfoPayment;\r\n\r\n const initInfo = {\r\n id_user: props.user.idUser,\r\n id_external_user: 0,\r\n id_account: account?.idAccount,\r\n name: pseProvider === 'payvalida' ? `${props.user.name} ${props.user.lastname}` : props.user.name,\r\n last_name: props.user.lastname,\r\n email: props.user.email,\r\n phone: props.user.phone,\r\n address: props.user.address,\r\n id_document: \"\",\r\n financial_institution_code: \"0\",\r\n user_legal_id_type: userLegalTypes[0].value,\r\n user_type: userTypes[0].value,\r\n id_bills: [],\r\n neugets: 0,\r\n commission: 0,\r\n total_payment: props.totalPayment,\r\n }\r\n\r\n const [defaultInfo, setDefaultInfo] = useState(initInfo);\r\n\r\n useEffect(() => {\r\n if (defaultInfo != null) {\r\n setInfoPayment(defaultInfo)\r\n setDefaultInfo(null)\r\n }\r\n }, [defaultInfo, setInfoPayment]);\r\n\r\n const [personalData, setShowPersonalData] = useState(pseProvider !== 'payvalida');\r\n const [bankData, setShowBankData] = useState(pseProvider === 'payvalida');\r\n\r\n useEffect(() => setEnable(isValidUser(infoPayment)), [setEnable, infoPayment]);\r\n\r\n useEffect(() => {\r\n !banks.length && pseProvider === 'payvalida' && loadBankDataAsync();\r\n }, [banks, loadBankDataAsync, pseProvider]);\r\n\r\n return (\r\n \r\n {\r\n setInfoPayment({ ...infoPayment, card_name: target.value })\r\n }}\r\n theme={theme}\r\n help={props.language.invoices_card_payment_equal_cardholder_name}\r\n required\r\n />\r\n {\r\n target.value.length <= 16 && setInfoPayment({ ...infoPayment, card_number: target.value })\r\n }}\r\n theme={theme}\r\n required\r\n />\r\n {\r\n target.value.length <= 4 && setInfoPayment({ ...infoPayment, card_cvv: target.value })\r\n }}\r\n theme={theme}\r\n required\r\n />\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {props.language.invoices_card_payment_bank}
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {infoPayment.card_name === '' ? `${props.language.invoices_card_payment_cardholder}` : `${infoPayment.card_name}`.toUpperCase()}
\r\n {infoPayment.card_expiration_month === '' ? 'MM' : infoPayment.card_expiration_month}/{infoPayment.card_expiration_year === '' ? 'YY' : infoPayment.card_expiration_year}
\r\n {separarTexto(infoPayment.card_number === '' ? 'XXXXXXXXXXXXXXXX' : `${infoPayment.card_number}`)}
\r\n \r\n \r\n
\r\n \r\n {\r\n setInfoPayment({ ...infoPayment, id_document: target.value })\r\n }}\r\n theme={theme}\r\n required\r\n />\r\n {\r\n setInfoPayment({ ...infoPayment, address: target.value })\r\n }}\r\n theme={theme}\r\n required\r\n />\r\n
\r\n \r\n
\r\n \r\n {\r\n target.value <= 12 && setInfoPayment({ ...infoPayment, card_expiration_month: target.value })\r\n }}\r\n theme={theme}\r\n required\r\n />\r\n
\r\n \r\n {\r\n target.value.length <= 2 && setInfoPayment({ ...infoPayment, card_expiration_year: target.value })\r\n }}\r\n theme={theme}\r\n required\r\n />\r\n
\r\n \r\n {\r\n setInfoPayment({ ...infoPayment, payments: value });\r\n }}\r\n theme={theme}\r\n width={\"350px\"}\r\n required\r\n />\r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n user: state.users.user,\r\n account: state.accounts.account,\r\n banks: state.invoices.banks,\r\n language: state.shared.language,\r\n infoPayment: state.pays.infoPayment,\r\n paymentProvider: state.pays.paymentProvider,\r\n theme: state.theme.theme,\r\n setEnable: ownProps.setEnable,\r\n totalPayment: ownProps.totalPayment,\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n loadBankDataAsync: () => dispatch(invoicesActions.loadBankDataAsync()),\r\n setInfoPayment: (payload) => dispatch(paysActions.setInfoPayment(payload)),\r\n setPsePaymentAsync: (payload) => dispatch(paysActions.setPsePaymentAsync(payload))\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(PsePayment)","import React, { useState, useEffect } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport { track } from '@amplitude/analytics-browser';\r\n\r\nimport * as paysActions from '../../../store/actions/Pays';\r\nimport * as sharedActions from '../../../store/actions/Shared';\r\nimport * as invoicesActions from '../../../store/actions/Invoices';\r\n\r\nimport { Alert, Drawer, Loader } from 'rsuite';\r\n\r\nimport CurrencyFormat from 'react-currency-format';\r\n\r\nimport PaymentMethod from './PaymentMethod';\r\nimport CardPayment from './CardPayment';\r\nimport PsePayment from './PsePayment';\r\nimport BackButton from '../../shared/utilities/BackButton';\r\n\r\nconst Component = ({ type, setEnable, totalPayment }) => {\r\n\r\n switch ((type || 'METHOD').toUpperCase()) {\r\n case 'CARD':\r\n return \r\n \r\n \r\n {\r\n pseProvider === 'payvalida' && \r\n \r\n \r\n \r\n }\r\n \r\n
\r\n {setShowPersonalData(!personalData); setShowBankData(!bankData)}}>\r\n
\r\n {props.language.invoices_pay_title_section_personal_data}
\r\n \r\n \r\n
\r\n \r\n {\r\n setInfoPayment({ ...infoPayment, name: target.value })\r\n }}\r\n theme={theme}\r\n required\r\n />\r\n
\r\n \r\n {\r\n setInfoPayment({ ...infoPayment, user_legal_id_type: value })\r\n }}\r\n theme={theme}\r\n width={'350px'}\r\n required\r\n height={130}\r\n />\r\n
\r\n \r\n {\r\n setInfoPayment({ ...infoPayment, id_document: target.value })\r\n }}\r\n theme={theme}\r\n required\r\n />\r\n
\r\n \r\n
\r\n \r\n {\r\n setInfoPayment({ ...infoPayment, phone: target.value })\r\n }}\r\n theme={theme}\r\n required\r\n />\r\n
\r\n \r\n {\r\n setInfoPayment({ ...infoPayment, address: target.value })\r\n }}\r\n theme={theme}\r\n required\r\n />\r\n
\r\n \r\n {\r\n setInfoPayment({ ...infoPayment, email: target.value })\r\n }}\r\n theme={theme}\r\n required\r\n />\r\n
\r\n { setShowPersonalData(!personalData); setShowBankData(!bankData) }}>\r\n
\r\n {props.language.invoices_pay_title_section_bank_data}
\r\n \r\n \r\n
\r\n \r\n {\r\n const type = value === userTypes[1].value ? userLegalTypes[1].value : userLegalTypes[0].value;\r\n setInfoPayment({ ...infoPayment, user_type: value, user_legal_id_type: type })\r\n }}\r\n theme={theme}\r\n width={'350px'}\r\n required\r\n />\r\n
\r\n \r\n {props.banks.length ?\r\n {\r\n setInfoPayment({ ...infoPayment, financial_institution_code: value });\r\n }}\r\n theme={theme}\r\n width={'350px'}\r\n required\r\n /> : null\r\n }\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n handleClose()}> \r\n
\r\n {typeComponent === 'METHOD' ? props.language.invoices_card_payment_methods : props.language.invoices_pay_with_method_view_title}
\r\n \r\n
\r\n \r\n \r\n )\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n infoPayment: state.pays.infoPayment,\r\n paymentMethods: state.pays.paymentMethods,\r\n typeComponent: state.pays.typeComponent,\r\n paymentProvider: state.pays.paymentProvider,\r\n showPay: state.invoices.showPay,\r\n invoicesSummary: state.invoices.invoicesSummary,\r\n language: state.shared.language,\r\n payment: state.shared.startOnboarding.payment,\r\n activeServicesInvoices: state.services.activeServicesInvoices,\r\n user: state.users.user,\r\n invoicesDate: state.invoices.invoicesDate,\r\n theme: state.theme.theme,\r\n ...ownProps\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n loadPaymentMethodsAsync: () => dispatch(paysActions.loadPaymentMethodsAsync()),\r\n setTypeComponent: (payload) => dispatch(paysActions.setTypeComponent(payload)),\r\n setPsePaymentAsync: (payload) => dispatch(paysActions.setPsePaymentAsync(payload)),\r\n setCardPaymentAsync: (payload) => dispatch(paysActions.setCardPaymentAsync(payload)),\r\n setStartOnboarding: (payload) => dispatch(sharedActions.setStartOnboarding(payload)),\r\n setShowPay: (payload) => dispatch(invoicesActions.setShowPay(payload)),\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Pay)","import React, { useEffect, useState } from 'react'\r\n\r\nimport { connect } from \"react-redux\";\r\n\r\nimport { Calendar as Datepicker } from 'react-calendar';\r\nimport { Transition } from 'react-transition-group';\r\nimport { calendarIntervals, setCalendarDates } from '../../../services/CalendarHandler';\r\nimport { subMonths } from 'date-fns';\r\nimport { track } from '@amplitude/analytics-browser';\r\n\r\nconst CalendarInvoices = (props) => {\r\n\r\n let show = props.show;\r\n let interval = props.interval;\r\n let start = props.start;\r\n let end = props.end;\r\n let cleanDate = props.cleanDate;\r\n let theme = props.theme;\r\n \r\n const setDates = props.setDates;\r\n const clearDate = props.clear;\r\n const setShowCalendar = props.setShowCalendar;\r\n\r\n const [selectedDate, setSelectedDate] = useState(!cleanDate ? (interval === 1 ? [start, end] : start) : null);\r\n\r\n useEffect(() => {\r\n if(!show && cleanDate){\r\n setSelectedDate(null);\r\n }\r\n }, [show, cleanDate])\r\n\r\n return (\r\n \r\n
\r\n {props.language.invoices_pay_invoices_selected}
\r\n {dynamicSelectedPedingInvoices} {props.language.invoices_pay_invoices_selected_unit}\r\n\r\n \r\n
\r\n \r\n {\r\n if (isEnable) {\r\n setLoadingOpenPay(true);\r\n if (typeComponent.toUpperCase() === 'CARD') {\r\n setCardPaymentAsync({ id_bills_array: invoicesSummary.id_bills_array })\r\n } else {\r\n setPsePaymentAsync({ pseProvider, id_bills_array: invoicesSummary.id_bills_array })\r\n }\r\n track('Bills payed', {\r\n Payment_Method: typeComponent,\r\n Bill_Quantity: activeServicesInvoices.map((service) => service?.name).length\r\n })\r\n } else {\r\n if (typeComponent.toUpperCase() === 'CARD') {\r\n showCardError(infoPayment, props)\r\n } else {\r\n showPseError(infoPayment, props)\r\n }\r\n }\r\n }}\r\n >\r\n {\r\n loadingOpenPay ? (\r\n <>\r\n
\r\n \r\n
\r\n {\r\n typeComponent !== 'METHOD' && (\r\n \r\n \r\n {props.language.invoices_pay_total_title}\r\n
\r\n\r\n
\r\n \r\n { props.language.invoices_pay_total_unit }\r\n
\r\n\r\n { props.language.loader_text_content }\r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n{props.language.invoices_button_pay}
\r\n \r\n )\r\n }\r\n \r\n )\r\n }\r\n\r\n {/* */}\r\n
\r\n )}\r\n \r\n )\r\n}\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n theme: state.theme.theme,\r\n ...ownProps\r\n});\r\n\r\nconst mapDispatchToProps = () => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CalendarInvoices)","import React, { useState, useEffect, useRef, useMemo } from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport { useLocation, useHistory } from 'react-router-dom';\r\n\r\nimport * as servicesActions from \"../../store/actions/Services\";\r\nimport * as invoicesActions from \"../../store/actions/Invoices\";\r\nimport * as sharedActions from \"../../store/actions/Shared\";\r\n\r\nimport { format, subMonths } from \"date-fns\";\r\nimport { es } from \"date-fns/locale\";\r\n\r\nimport { Loader } from \"rsuite\";\r\n\r\nimport { stringFormatDate } from \"../../services/CalendarHandler\";\r\nimport { GETS3PublicUrl, SETBlobFile } from \"../../services/WebServices\";\r\n\r\nimport { Transition } from 'react-transition-group';\r\n\r\nimport useTour from \"../onboarding/hook/useTour\";\r\n\r\nimport InvoiceModal from \"./InvoiceModal\";\r\nimport InvoiceTable from \"./InvoiceTable\";\r\nimport InvoiceSummary from \"./InvoiceSummary\";\r\nimport AccountDrawer from \"./account/AccountDrawer\";\r\nimport ContentLoader from \"react-content-loader\";\r\nimport Header from \"../shared/Header\";\r\nimport Pay from \"./pay/Pay\";\r\nimport CalendarInvoices from \"../shared/utilities/CalendarInvoices\";\r\n\r\nimport { stepsInvoice } from \"../onboarding/steps/InvoiceSteps\";\r\nimport { track } from \"@amplitude/analytics-browser\";\r\n\r\nconst Invoices = (props) => {\r\n\r\n let _invoices = props.invoices;\r\n let _totalServices = props.totalServices;\r\n let activeServicesInvoices = props.activeServicesInvoices;\r\n let activeServicesEnergy = props.activeServicesEnergy;\r\n let showCalendar = props.showCalendar;\r\n let account = props.account;\r\n let invoiceShow = props.invoiceShow;\r\n let invoicesPeriods = props.invoicesPeriods;\r\n let invoicesLoading = props.invoicesLoading;\r\n let user = props.user;\r\n let totalAccounts = props.totalAccounts;\r\n let energyAccounts = totalAccounts.filter(currentAccount => currentAccount.typeservices.includes('energy'));\r\n let currentPage = props.currentPage;\r\n let sortField = props.sortField;\r\n let sortOrder = props.sortOrder;\r\n let invoicesDate = props.invoicesDate;\r\n let moreInvoicesLoading = props.moreInvoicesLoading;\r\n let invoicesSummary = props.invoicesSummary;\r\n let theme = props.theme;\r\n\r\n const setShowBlackScreen = props.setShowBlackScreen;\r\n const loadMoreInvoicesAsync = props.loadMoreInvoicesAsync;\r\n const loadInvoicesAsync = props.loadInvoicesAsync;\r\n const loadInvoicesSummaryAsync = props.loadInvoicesSummaryAsync;\r\n const setShowCalendar = props.setShowCalendar;\r\n const loadServicesAsync = props.loadServicesAsync;\r\n const setInvoiceShow = props.setInvoiceShow;\r\n const setInvoiceShowIndex = props.setInvoiceShowIndex;\r\n const setInvoicesContent = props.setInvoicesContent;\r\n const setInvoicesContentLoading = props.setInvoicesContentLoading;\r\n const loadInvoicesPeriodsAsync = props.loadInvoicesPeriodsAsync;\r\n const setCurrentPage = props.setCurrentPage;\r\n const _setInvoices = props.setInvoices;\r\n const setActiveServicesInvoices = props.setActiveServicesInvoices;\r\n const setEmptyPaginationResult = props.setEmptyPaginationResult;\r\n const setInvoicesSummary = props.setInvoicesSummary;\r\n\r\n const history = useHistory();\r\n const location = useLocation();\r\n\r\n const [filteredByActiveServices, setFilteredByActiveServices] = useState(false);\r\n const [zoomIn, setZoomIn] = useState(false);\r\n const [invoices, setInvoices] = useState([]);\r\n const [invoiceUrl, setInvoiceUrl] = useState(null);\r\n const [isExpanded, setIsExpanded] = useState(false);\r\n\r\n const [debounceSearchInvoices, setDebounceSearchInvoices] = useState('');\r\n const [searchInvoices, setSearchInvoices] = useState('');\r\n const [openAccountDrawer, setOpenAccountDrawer] = useState(false);\r\n const [openInvoiceStateModal, setOpenInvoiceStateModal] = useState(false);\r\n const [loadingDownload, setLoadingDownload] = useState(false);\r\n const [cleanDate, setCleanDate] = useState(false);\r\n const [invoiceModalIndexes, setInvoicesModalIndexes] = useState(null);\r\n const [selectAll, setSelectAll] = useState(true);\r\n const [filterPendingInvoices, setFilterPendingInvoices] = useState(false);\r\n const [fromEnergyAccount, setFromEnergyAccount] = useState(false);\r\n\r\n const searchInputContainerRef = useRef(null);\r\n const searchInputRef = useRef(null);\r\n const invoicesContainerRef = useRef(null);\r\n const invoiceStateModal = useRef(null);\r\n const accountPickerRef = useRef(null);\r\n\r\n const handleCalendar = (value) => {\r\n setShowCalendar(false);\r\n props.setInvoicesDate(value.graphDateFrom);\r\n setCurrentPage(0);\r\n setEmptyPaginationResult(false)\r\n setInvoicesContentLoading(true);\r\n setInvoicesContent([]);\r\n setCleanDate(false);\r\n };\r\n\r\n const handleDocumentClick = (event) => {\r\n if (searchInputContainerRef.current && !searchInputContainerRef.current.contains(event.target)) {\r\n setIsExpanded(false);\r\n }\r\n }\r\n\r\n const normalizeInvoices = () => {\r\n return [..._invoices].map((currentInvoice, index) => {\r\n const oldInvoice = index < invoices.length;\r\n const selectedCurrentInvoice = !currentInvoice.loadingDelay && currentInvoice.state === 0;\r\n return {\r\n ...currentInvoice,\r\n isSelected: (oldInvoice && !invoices[index].loadingDelay) ?\r\n invoices[index].isSelected\r\n : selectedCurrentInvoice\r\n }\r\n })\r\n }\r\n\r\n const toggleSelectAll = () => {\r\n const notSelectedPedingInvoices = invoices.filter(currentInvoice => !currentInvoice.loadingDelay && currentInvoice.state === 0 && !currentInvoice.isSelected)\r\n const selectedPedingInvoices = invoices.filter(currentInvoice => !currentInvoice.loadingDelay && currentInvoice.state === 0 && currentInvoice.isSelected)\r\n const selectedInvoices = selectAll ? (invoicesSummary.total_bills - notSelectedPedingInvoices.length) : (selectedPedingInvoices.length);\r\n const id_bills_array = invoicesSummary.id_bills_array.map(bill => ({ ...bill, selected: !selectAll }))\r\n if (selectedInvoices > 0) {\r\n const invoicesToRevert = !selectAll ? selectedPedingInvoices : notSelectedPedingInvoices;\r\n const revertSummary = invoicesToRevert.reduce((accum, i) => {\r\n if (selectAll) {\r\n accum.total_consumption = accum.total_consumption + parseFloat(i.consumption)\r\n accum.total_payment = accum.total_payment + parseFloat(i.total_payment)\r\n } else {\r\n accum.total_consumption = accum.total_consumption - parseFloat(i.consumption)\r\n accum.total_payment = accum.total_payment - parseFloat(i.total_payment)\r\n }\r\n return accum\r\n }, { total_consumption: parseFloat(invoicesSummary.total_consumption), total_payment: parseFloat(invoicesSummary.total_payment) })\r\n setInvoicesSummary({\r\n ...invoicesSummary,\r\n ...revertSummary,\r\n id_bills_array\r\n })\r\n setSelectAll(false)\r\n setInvoices(invoices.map(currentInvoice => {\r\n return ({\r\n ...currentInvoice,\r\n isSelected: false\r\n })\r\n }))\r\n } else {\r\n if (selectAll) {\r\n const revertSummary = notSelectedPedingInvoices.reduce((accum, i) => {\r\n accum.total_consumption = accum.total_consumption + parseFloat(i.consumption)\r\n accum.total_payment = accum.total_payment + parseFloat(i.total_payment)\r\n return accum\r\n }, { total_consumption: 0, total_payment: 0 })\r\n setInvoicesSummary({\r\n ...invoicesSummary,\r\n ...revertSummary,\r\n id_bills_array\r\n })\r\n }\r\n setSelectAll(true)\r\n setInvoices(invoices.map(currentInvoice => {\r\n return ({\r\n ...currentInvoice,\r\n isSelected: !currentInvoice.loadingDelay && currentInvoice.state === 0\r\n })\r\n }))\r\n }\r\n }\r\n\r\n const downloadConsolidate = async () => {\r\n try {\r\n setLoadingDownload(true);\r\n const servicesIds = activeServicesInvoices.map(s => s.idService)\r\n const blob = await SETBlobFile(\r\n 'bills/historical',\r\n 'POST',\r\n JSON.stringify({ id_user: user.idUser, month: invoicesDate.getMonth() + 1, year: invoicesDate.getFullYear(), id_services: servicesIds }),\r\n )\r\n if (!blob) throw new Error('Error getting blob')\r\n const url = window.URL.createObjectURL(blob);\r\n const link = document.createElement('a');\r\n link.href = url;\r\n link.download = `consolidate-${format(invoicesDate, 'MMMM', { locale: es })}-de-${format(invoicesDate, 'yyyy')}.xlsx`\r\n link.click();\r\n\r\n window.URL.revokeObjectURL(url);\r\n setLoadingDownload(false);\r\n track('Bill matrix downloaded')\r\n } catch (err) {\r\n console.error(err);\r\n }\r\n }\r\n\r\n const handleInvoicesContainerScroll = () => {\r\n if (invoicesContainerRef.current && !moreInvoicesLoading) {\r\n const { scrollTop, scrollHeight, clientHeight } = invoicesContainerRef.current;\r\n\r\n if (scrollTop + clientHeight >= scrollHeight) {\r\n setCurrentPage(currentPage + 1);\r\n }\r\n }\r\n }\r\n\r\n const clearDate = (e) => {\r\n e.stopPropagation();\r\n props.setInvoicesDate(subMonths(new Date(), 1));\r\n setShowCalendar(false);\r\n setCurrentPage(0);\r\n setEmptyPaginationResult(false)\r\n setCleanDate(true);\r\n track('Billing all month selected')\r\n }\r\n\r\n const groupDataByAccountAndDate = (invoices) => {\r\n const groupedData = invoices.reduce((result, customer) => {\r\n let accountGroup = result.find(group => group.account === customer.account);\r\n if (!accountGroup) {\r\n accountGroup = { account: customer.account, id_account: customer.id_account, dates: [] };\r\n result.push(accountGroup);\r\n }\r\n const customerDate = new Date(customer?.year, customer?.month - 1, 1, 12).toISOString()\r\n\r\n let dateGroup = accountGroup.dates.find(group => group.date === customerDate);\r\n if (!dateGroup) {\r\n dateGroup = { date: customerDate, invoices: [] };\r\n accountGroup.dates = [...accountGroup.dates, dateGroup].sort();\r\n }\r\n\r\n dateGroup.invoices = [...dateGroup.invoices, { ...customer }];\r\n return result.sort((a, b) => a.id_account - b.id_account);\r\n }, []);\r\n return groupedData;\r\n };\r\n\r\n const handleOpenModal = async (rowData, accountIndex, dateGroupIndex, invoiceIndex) => {\r\n setInvoicesModalIndexes({ accountIndex, dateGroupIndex, invoiceIndex })\r\n if (rowData.type_content === \"pdf\") {\r\n const result = await GETS3PublicUrl(rowData.pdf_path);\r\n setInvoiceUrl(result);\r\n } else {\r\n setInvoiceUrl('');\r\n setInvoiceShow(rowData)\r\n }\r\n setZoomIn(true)\r\n }\r\n\r\n const handleClickOutside = (event) => {\r\n if (invoiceStateModal.current && !invoiceStateModal.current.contains(event.target)) {\r\n setOpenInvoiceStateModal(false);\r\n }\r\n if (accountPickerRef.current && !accountPickerRef.current.contains(event.target)) {\r\n setOpenAccountDrawer(false);\r\n }\r\n };\r\n\r\n const handleFilterPendingInvoices = (value) => {\r\n setFilterPendingInvoices(value)\r\n setCurrentPage(0);\r\n setEmptyPaginationResult(false);\r\n }\r\n\r\n useEffect(() => {\r\n track('Billing viewed')\r\n document.addEventListener(\"mousedown\", handleClickOutside);\r\n return () => {\r\n document.removeEventListener(\"mousedown\", handleClickOutside);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n setShowBlackScreen(showCalendar);\r\n }, [setShowBlackScreen, showCalendar]);\r\n\r\n useEffect(() => {\r\n setShowBlackScreen(openInvoiceStateModal);\r\n }, [setShowBlackScreen, openInvoiceStateModal]);\r\n\r\n useEffect(() => {\r\n setShowBlackScreen(openAccountDrawer);\r\n }, [setShowBlackScreen, openAccountDrawer]);\r\n\r\n useEffect(() => {\r\n if (account && !activeServicesInvoices.length) {\r\n loadServicesAsync();\r\n }\r\n // eslint-disable-next-line\r\n }, [account, loadServicesAsync]);\r\n\r\n useEffect(() => {\r\n if (activeServicesInvoices.length) {\r\n loadInvoicesPeriodsAsync();\r\n }\r\n // eslint-disable-next-line\r\n }, [activeServicesInvoices]);\r\n\r\n useEffect(() => {\r\n if (activeServicesEnergy.length && !filteredByActiveServices) {\r\n if (location.state?.fromEnergy) {\r\n history.replace({\r\n pathname: location.pathname,\r\n state: null\r\n })\r\n const activeAccountsIds = activeServicesEnergy.map(s => s.idAccount);\r\n props.setInvoicesDate(subMonths(invoicesDate, 1))\r\n setActiveServicesInvoices(_totalServices.filter(currentService =>\r\n activeAccountsIds.some(currentIdAccount => currentService.idAccount === currentIdAccount)\r\n ));\r\n setFromEnergyAccount(true);\r\n }\r\n setFilteredByActiveServices(true);\r\n }\r\n // eslint-disable-next-line\r\n }, [activeServicesEnergy, _totalServices])\r\n\r\n useEffect(() => {\r\n if (!invoicesPeriods.length) { _setInvoices([]) }\r\n\r\n if (activeServicesInvoices.length && invoicesPeriods?.length && filteredByActiveServices) {\r\n const invoicesPerPage = 20;\r\n if (currentPage > 0) {\r\n loadMoreInvoicesAsync({\r\n offset: (invoicesPerPage * currentPage),\r\n limit: invoicesPerPage,\r\n searchText: debounceSearchInvoices,\r\n sortOrder: sortOrder,\r\n sortField: sortField,\r\n month: !cleanDate ? invoicesDate.getMonth() + 1 : null,\r\n year: !cleanDate ? invoicesDate.getFullYear() : null,\r\n pendingInvoices: filterPendingInvoices\r\n });\r\n } else {\r\n loadInvoicesAsync({\r\n searchText: debounceSearchInvoices,\r\n sortOrder: sortOrder,\r\n sortField: sortField,\r\n month: !cleanDate ? invoicesDate.getMonth() + 1 : null,\r\n year: !cleanDate ? invoicesDate.getFullYear() : null,\r\n pendingInvoices: filterPendingInvoices\r\n });\r\n }\r\n setInvoiceShowIndex(0);\r\n } else {\r\n setInvoices([])\r\n }\r\n // eslint-disable-next-line\r\n }, [activeServicesInvoices, filteredByActiveServices, invoicesPeriods, currentPage, debounceSearchInvoices, sortOrder, sortField, invoicesDate, filterPendingInvoices]);\r\n\r\n useEffect(() => {\r\n if (cleanDate) {\r\n loadInvoicesSummaryAsync({ selectAll })\r\n return;\r\n }\r\n if (activeServicesInvoices.length && _invoices.length) {\r\n loadInvoicesSummaryAsync({\r\n month: invoicesDate.getMonth() + 1,\r\n year: invoicesDate.getFullYear(),\r\n selectAll\r\n })\r\n }\r\n // eslint-disable-next-line\r\n }, [activeServicesInvoices, invoicesDate, cleanDate, _invoices])\r\n\r\n useEffect(() => {\r\n setInvoices(normalizeInvoices())\r\n // eslint-disable-next-line\r\n }, [_invoices])\r\n\r\n useEffect(() => {\r\n if (invoiceShow) {\r\n if (invoiceShow?.type_content === \"pdf\") {\r\n setInvoiceUrl(`https://${process.env.REACT_APP_S3_BUCKET}.s3.us-east-2.amazonaws.com/${invoiceShow?.pdf_path}`);\r\n setInvoicesContentLoading(false);\r\n }\r\n } else {\r\n setInvoiceUrl(\"\");\r\n }\r\n // eslint-disable-next-line\r\n }, [invoiceShow, invoices, account]);\r\n\r\n useEffect(() => {\r\n document.addEventListener(\"click\", handleDocumentClick)\r\n return () => {\r\n document.removeEventListener(\"click\", handleDocumentClick)\r\n }\r\n }, [])\r\n\r\n useEffect(() => {\r\n if (searchInputRef.current) {\r\n searchInputRef.current.focus()\r\n }\r\n }, [isExpanded])\r\n\r\n useEffect(() => {\r\n const timeout = setTimeout(() => {\r\n setDebounceSearchInvoices(searchInvoices)\r\n setCurrentPage(0)\r\n setEmptyPaginationResult(false)\r\n }, 2000)\r\n return () => clearTimeout(timeout)\r\n // eslint-disable-next-line\r\n }, [searchInvoices]) \r\n\r\n const tourInvoice = useTour({\r\n steps: stepsInvoice(props.language),\r\n localStorageKey: \"invoice-tutorial\", \r\n runTour: props.invoiceOnboarding,\r\n setRunTour: props.setStartOnboarding, \r\n key: \"invoice\",\r\n });\r\n\r\n const activeAccounts = [...new Set(activeServicesInvoices.filter(i => i.type.name.includes('energy')).map(invoice => invoice.idAccount))];\r\n\r\n // eslint-disable-next-line\r\n const groupedData = useMemo(() => groupDataByAccountAndDate(invoices), [invoices, sortField, sortOrder]);\r\n\r\n const setPreviousInvoiceModal = () => {\r\n if (!invoiceModalIndexes) return;\r\n const { accountIndex, invoiceIndex, dateGroupIndex } = invoiceModalIndexes;\r\n let newAccountIndex = null;\r\n let newInvoiceIndex = null;\r\n let newDateGroupIndex = null;\r\n if (invoiceIndex !== 0) {\r\n newAccountIndex = accountIndex;\r\n newDateGroupIndex = dateGroupIndex;\r\n newInvoiceIndex = invoiceIndex - 1;\r\n return;\r\n } else if (dateGroupIndex !== 0) {\r\n newAccountIndex = accountIndex;\r\n newDateGroupIndex = dateGroupIndex - 1;\r\n const previousDate = groupedData[newAccountIndex].dates[newDateGroupIndex]\r\n newInvoiceIndex = previousDate.invoices.length - 1;\r\n } else if (accountIndex !== 0) {\r\n newAccountIndex = accountIndex - 1;\r\n const previousAccount = groupedData[newAccountIndex]\r\n newDateGroupIndex = previousAccount.dates.length - 1;\r\n const previousDate = previousAccount.dates[newDateGroupIndex]\r\n newInvoiceIndex = previousDate.invoices.length - 1;\r\n }\r\n if (newAccountIndex !== null && newDateGroupIndex !== null && newInvoiceIndex !== null) {\r\n const newInvoice = groupedData[newAccountIndex].dates[newDateGroupIndex].invoices[newInvoiceIndex];\r\n handleOpenModal(newInvoice, newAccountIndex, newDateGroupIndex, newInvoiceIndex)\r\n }\r\n }\r\n\r\n const setFollowingInvoiceModal = () => {\r\n if (!invoiceModalIndexes) return;\r\n const { accountIndex, invoiceIndex, dateGroupIndex } = invoiceModalIndexes;\r\n let newAccountIndex = null;\r\n let newInvoiceIndex = null;\r\n let newDateGroupIndex = null;\r\n const currentAccount = groupedData[accountIndex];\r\n const currentDate = currentAccount.dates[dateGroupIndex];\r\n if (invoiceIndex !== currentDate.invoices.length - 1) {\r\n newAccountIndex = accountIndex;\r\n newDateGroupIndex = dateGroupIndex;\r\n newInvoiceIndex = invoiceIndex + 1;\r\n return;\r\n } else if (dateGroupIndex !== currentAccount.dates.length - 1) {\r\n newAccountIndex = accountIndex;\r\n newDateGroupIndex = dateGroupIndex + 1;\r\n const previousDate = groupedData[newAccountIndex].dates[newDateGroupIndex]\r\n newInvoiceIndex = previousDate.invoices.length - 1;\r\n } else if (accountIndex !== groupedData.length - 1) {\r\n newAccountIndex = accountIndex + 1;\r\n const previousAccount = groupedData[newAccountIndex]\r\n newDateGroupIndex = previousAccount.dates.length - 1;\r\n const previousDate = previousAccount.dates[newDateGroupIndex]\r\n newInvoiceIndex = previousDate.invoices.length - 1;\r\n }\r\n if (newAccountIndex !== null && newDateGroupIndex !== null && newInvoiceIndex !== null) {\r\n const newInvoice = groupedData[newAccountIndex].dates[newDateGroupIndex].invoices[newInvoiceIndex];\r\n handleOpenModal(newInvoice, newAccountIndex, newDateGroupIndex, newInvoiceIndex)\r\n }\r\n }\r\n\r\n const getMonthLabel = () => {\r\n const strDate = stringFormatDate(props.invoicesDate, 2);\r\n if (!strDate || strDate.length === 0) return '';\r\n return strDate[0].toUpperCase() + strDate.slice(1, strDate.length)\r\n }\r\n\r\n return (\r\n \r\n
}\r\n prevLabel={}\r\n onChange={(value) => {setSelectedDate(value)}} \r\n />\r\n
\r\n
\r\n {props.language.invoices_watch_all_months}
\r\n \r\n\r\n {\r\n invoicesLoading ? (\r\n \r\n setOpenInvoiceStateModal(true)}\r\n >\r\n
\r\n \r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n {props.language.invoices_title}
\r\n\r\n setShowCalendar(true)}\r\n >\r\n
\r\n \r\n \r\n {state => (\r\n \r\n )}\r\n \r\n setOpenAccountDrawer(true)}\r\n >\r\n
\r\n \r\n {\r\n energyAccounts.length === activeAccounts.length ? props.language.invoices_empty_account_selection\r\n : `${activeAccounts.length} ${props.language.invoices_account_total_selection_separator} ${energyAccounts.length} ${props.language.invoices_account_total_selection}`\r\n }\r\n
\r\n\r\n \r\n setOpenAccountDrawer(false)} />\r\n
\r\n \r\n {cleanDate ? props.language.invoices_empty_date_selection : getMonthLabel()}\r\n
\r\n \r\n \r\n
\r\n \r\n {filterPendingInvoices ? props.language.invoices_pending_filter_option : props.language.invoices_empty_filter_selection}\r\n
\r\n\r\n \r\n \r\n {state => (\r\n
\r\n \r\n {/* */}\r\n
)}\r\n \r\n \r\n
\r\n {track('Pending bills filter selected', {Bill_status_ID: 'Todas las facturas'}); handleFilterPendingInvoices(false)}}>\r\n
\r\n { props.language.invoices_empty_filter_selection }
\r\n \r\n {track('Pending bills filter selected', {Bill_status_ID: 'Por pagar'}); handleFilterPendingInvoices(true)}}>\r\n
\r\n { props.language.invoices_pending_filter_option }
\r\n\r\n {invoicesSummary.total_bills}\r\n \r\n
\r\n \r\n \r\n {state => (\r\n \r\n )}\r\n \r\n \r\n {\r\n loadingDownload ? (\r\n <>\r\n
\r\n \r\n {props.language.loader_text_content}\r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n\r\n {props.language.invoices_download_consolidate}\r\n
\r\n \r\n )\r\n }\r\n\r\n { track('Billing searchbar clicked'); setSearchInvoices(e.target.value)}} placeholder=\"Buscar\"\r\n />\r\n
\r\n )\r\n }\r\n \r\n \r\n \r\n \r\n \r\n
,\r\n title: language.onboarding_invoice_title_step1,\r\n description: language.onboarding_invoice_description_step1,\r\n placement: \"right\",\r\n target: \"#invoices_picker\",\r\n disableBeacon: true,\r\n steps: 4\r\n },\r\n {\r\n content:\r\n \r\n \r\n
,\r\n title: language.onboarding_invoice_title_step2,\r\n description: language.onboarding_invoice_description_step2,\r\n placement: \"left-start\",\r\n target: \"#invoices_download\",\r\n disableBeacon: true,\r\n steps: 4\r\n }, \r\n {\r\n content:\r\n \r\n \r\n
,\r\n title: language.onboarding_invoice_title_step4,\r\n description: language.onboarding_invoice_description_step4,\r\n placement: \"top-start\",\r\n target: \"#invoices_payment\",\r\n disableBeacon: true,\r\n steps: 4\r\n },\r\n {\r\n content:\r\n \r\n \r\n
,\r\n title: language.onboarding_invoice_title_step3,\r\n description: language.onboarding_invoice_description_step3,\r\n placement: \"center\",\r\n target: \"#invoices_detail\",\r\n disableBeacon: true,\r\n steps: 4\r\n },\r\n ])\r\n};","import React from \"react\"\r\n\r\n// import ThemedImage from \"../utils/ThemedImage\"\r\n\r\nexport const stepsUser = (language) => {\r\n return ([\r\n {\r\n content: (\r\n \r\n {/* */}\r\n
\r\n ),\r\n title: language.onboarding_user_title_step1,\r\n description: language.onboarding_user_description_step1,\r\n placement: \"right\",\r\n width: 340,\r\n height: 350,\r\n target: \"#user_modal\",\r\n disableBeacon: true,\r\n steps: 3\r\n },\r\n {\r\n content: (\r\n \r\n {/* 
*/}\r\n
\r\n ),\r\n title: language.onboarding_user_title_step2,\r\n description: language.onboarding_user_description_step2,\r\n placement: \"right\",\r\n width: 340,\r\n height: 350,\r\n target: \"#user_form\",\r\n disableBeacon: true,\r\n steps: 3,\r\n },\r\n {\r\n content: (\r\n \r\n {/* */}\r\n
\r\n ),\r\n title: language.onboarding_user_title_step3,\r\n description: language.onboarding_user_description_step3,\r\n placement: \"right-end\",\r\n width: 340,\r\n target: \"#user_edit\",\r\n disableBeacon: true,\r\n steps: 3,\r\n },\r\n ])\r\n}\r\n","import React, { Fragment, useState, useEffect } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nimport * as sharedActions from '../../store/actions/Shared';\r\nimport * as loginActions from '../../store/actions/Login';\r\nimport * as usersActions from '../../store/actions/Users';\r\nimport * as accountsActions from '../../store/actions/Accounts';\r\nimport * as alertsActions from '../../store/actions/Alerts';\r\nimport * as themeActions from \"../../store/actions/Theme\";\r\n\r\nimport { CircularProgressbarWithChildren } from 'react-circular-progressbar';\r\n\r\nimport { Animation, Drawer, Alert, Loader, Whisper, Tooltip } from 'rsuite';\r\n\r\nimport { SETFile } from '../../services/WebServices';\r\n\r\nimport Input from './utilities/Input';\r\nimport Select from './utilities/Select';\r\nimport MultipleSelect from './utilities/MultipleSelect';\r\nimport NewUser from '../users/NewUser';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nimport useTour from '../onboarding/hook/useTour';\r\nimport { stepsUser } from '../onboarding/steps/UserSteps';\r\n\r\nconst isValidateEmail = email => {\r\n return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email);\r\n}\r\n\r\nconst isValidUser = user => {\r\n\r\n if (user.name === null || user.name === \"\") {\r\n return false;\r\n }\r\n\r\n if (user.lastname === null || user.lastname === \"\") {\r\n return false;\r\n }\r\n\r\n if (!isValidateEmail(user.email)) {\r\n return false;\r\n }\r\n\r\n if (user.phone === null || user.phone === \"\") {\r\n return false;\r\n }\r\n\r\n if (user.address === null || user.address === \"\") {\r\n return false;\r\n }\r\n\r\n return true;\r\n\r\n}\r\n\r\nconst showError = (user, setFocus, setError, setShowMainInfo, language) => {\r\n\r\n if (user.name === null || user.name === \"\") {\r\n setFocus(1);\r\n setError(language.alert_user_popup_name);\r\n setShowMainInfo(true);\r\n return;\r\n }\r\n\r\n if (user.lastname === null || user.lastname === \"\") {\r\n setFocus(2);\r\n setError(language.alert_user_popup_lastname);\r\n setShowMainInfo(true);\r\n return;\r\n }\r\n\r\n if (!isValidateEmail(user.email)) {\r\n setFocus(3);\r\n setError(language.alert_user_popup_email);\r\n setShowMainInfo(true);\r\n return;\r\n }\r\n\r\n if (user.phone === null || user.phone === \"\") {\r\n setFocus(4);\r\n setError(language.alert_user_popup_phone);\r\n setShowMainInfo(true);\r\n return;\r\n }\r\n\r\n if (user.address === null || user.address === \"\") {\r\n setFocus(5);\r\n setError(language.alert_user_popup_address);\r\n setShowMainInfo(true);\r\n return;\r\n }\r\n\r\n return setFocus(0);\r\n\r\n}\r\n\r\nconst Account = (props) => {\r\n\r\n const location = useLocation();\r\n\r\n const setUserImage = (user, setIsLoading, e) => {\r\n\r\n const file = e.target.files[0];\r\n\r\n const data = new FormData();\r\n\r\n data.append(\"file\", file);\r\n data.append(\"id\", user.idUser.toString());\r\n data.append(\"folder\", \"profile-photos\");\r\n\r\n setIsLoading(true);\r\n\r\n SETFile(\"users/users/\", \"PUT\", data)\r\n .then(_result => {\r\n props.getUserImageAsync();\r\n })\r\n .catch(() => {\r\n Alert.error(props.language.alert_failed_change_image);\r\n })\r\n .finally(() => setIsLoading(false));\r\n\r\n }\r\n\r\n let languages = [\r\n {\r\n value: 1,\r\n label: props.language.user_select_option_language_es\r\n },\r\n {\r\n value: 2,\r\n label: props.language.user_select_option_language_en\r\n }\r\n ];\r\n\r\n\r\n let _user = props.user;\r\n let userJobs = props.userJobs;\r\n let language = props.language;\r\n let showCreateUserModal = props.showCreateUserModal;\r\n let showDrawerAlerts = props.showDrawerAlerts\r\n\r\n const setProfileProgress = props.setProfileProgress;\r\n const loadUserJobsAsync = props.loadUserJobsAsync;\r\n const getUserApiTokenAsync = props.getUserApiTokenAsync;\r\n\r\n const [user, setUserData] = useState(_user);\r\n const [userChanges, setUserChanges] = useState({});\r\n const [isEnable, setEnable] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n\r\n const [personalData, setShowPersonalData] = useState(false);\r\n const [mainInfo, setShowMainInfo] = useState(false); // eslint-disable-line no-unused-vars\r\n const [tokenApi, setTokenApi] = useState(false);\r\n const [focus, setFocus] = useState(0);\r\n const [error, setError] = useState(\"\");\r\n\r\n const tourUser = useTour({ steps: stepsUser(props.language), localStorageKey: \"user-tutorial\", isOpenDrawer: showCreateUserModal, runTour: props.newUser, setRunTour: props.setStartOnboarding, key: 'new_user' });\r\n\r\n const { theme } = props;\r\n\r\n const getProgressStyle = () => {\r\n \r\n return {\r\n path: { stroke: theme === 'dark' ? '#9ecc14' : '#7da60c' },\r\n trail: { stroke: theme === 'dark' ? '#262626' : '#fafafa' }\r\n }\r\n }\r\n\r\n const history = useHistory();\r\n\r\n const goToUserTable = () => {\r\n history.push('../users');};\r\n\r\n useEffect(() => {\r\n setUserData({..._user, roleIds: _user.jobs?.map(j => j.idJob)});\r\n }, [_user]);\r\n\r\n useEffect(() => {\r\n if (!userJobs.length)\r\n loadUserJobsAsync();\r\n }, [userJobs, loadUserJobsAsync]);\r\n\r\n useEffect(() => {\r\n setEnable(isValidUser(user));\r\n setProfileProgress(Object.values(user).filter(x => x !== undefined && x !== null && x !== '').length / Object.keys(user).length);\r\n }, [setEnable, setProfileProgress, user]);\r\n\r\n useEffect(() => {\r\n if (focus !== 0) { showError(user, setFocus, setError, setShowMainInfo, language) }\r\n }, [user, language, focus]);\r\n\r\n useEffect(() => { getUserApiTokenAsync() }, [getUserApiTokenAsync]);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {isLoading ?
\r\n \r\n
\r\n {user.name} {user.lastname}
\r\n \r\n \r\n \r\n \r\n
\r\n setTokenApi(!tokenApi)}>\r\n
\r\n \r\n \r\n
\r\n \r\n {props.language.user_title_section_api_token}
\r\n \r\n
\r\n \r\n
\r\n {props.language.user_title_section_api_token}
\r\n\r\n \r\n
\r\n \r\n {props.language.neugets_tooltip_copy_code}}>\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n props.setShowDrawerOnboarding(true)}>\r\n
\r\n \r\n \r\n
\r\n \r\n {props.language.onboarding_drawer_title}
\r\n \r\n
\r\n window.open(\"https://www.neu.com.co/privacy\", \"_blank\")}>\r\n
\r\n \r\n \r\n
\r\n \r\n {props.language.user_title_section_privacy_info}
\r\n window.open(\"https://neu-public.s3.sa-east-1.amazonaws.com/documents/Contrato_de_Condiciones_Uniformes.pdf\", \"_blank\")}>\r\n
\r\n \r\n \r\n
\r\n \r\n {props.language.user_title_section_terms_conditions}
\r\n {\r\n props.logout();\r\n props.setStep(1);\r\n }}>\r\n
\r\n {props.language.user_button_logout}
\r\n \r\n {data.map(option => (\r\n {\r\n setSelectedOption(option);\r\n track('Plus variable selected', {Plus_Variable_ID: option?.property})\r\n }}\r\n >\r\n
\r\n ))}\r\n \r\n }>\r\n {option.title}
\r\n {option.id === active.id && }\r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n language: state.shared.language,\r\n theme: state.theme.theme,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n setShowBlackScreen: (payload) => dispatch(sharedActions.setShowBlackScreen(payload))\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GraphPicker);","import React, {useState, useEffect} from 'react';\r\nimport { connect } from 'react-redux';\r\nimport * as plusActions from \"../../../../store/actions/Plus\";\r\n\r\nimport { Modal } from 'rsuite';\r\nimport Input from '../../../shared/utilities/Input';\r\n\r\nconst showError = (appliance, setFocus, setError, language) => {\r\n\r\n if (appliance.custom_name === null || appliance.custom_name === \"\") { \r\n setFocus(1);\r\n setError(language.alert_new_device_name);\r\n return;\r\n }\r\n\r\n if (appliance.type === null || appliance.type === \"\") { \r\n setFocus(2);\r\n setError(language.alert_new_device_type);\r\n return;\r\n }\r\n\r\n return setFocus(0);\r\n}\r\n\r\nconst validate = (appliance) => {\r\n\r\n if (appliance.custom_name === null || appliance.custom_name === \"\") {\r\n return false;\r\n } \r\n \r\n if (appliance.type === null || appliance.type === \"\") {\r\n return false;\r\n }\r\n\r\n return true\r\n}\r\n\r\nconst CreateDevice = (props) => {\r\n\r\n const applianceInit = {\r\n id_service: null,\r\n custom_name: null,\r\n type: null,\r\n brand: null,\r\n reference: null\r\n }\r\n\r\n const {theme} = props;\r\n const [appliance, setAppliance] = useState(applianceInit);\r\n const [focus, setFocus] = useState(0); \r\n const [error, setError] = useState(\"\");\r\n\r\n let language = props.language;\r\n\r\n useEffect(() => {\r\n if(props.activeServicesPlus.length){\r\n setAppliance({...appliance, id_service: props.activeServicesPlus[0]?.idService});\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [props.activeServicesPlus])\r\n\r\n useEffect(() => {\r\n if(focus !== 0) {showError(appliance, setFocus, setError, language)} \r\n }, [appliance, language, focus]);\r\n\r\n return(\r\n \r\n
\r\n \r\n \r\n\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n activeServicesPlus: state.services.activeServicesPlus,\r\n language: state.shared.language,\r\n theme: state.theme.theme,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n addAppliance: (payload) => dispatch(plusActions.addAppliance(payload)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(CreateDevice);\r\n\r\n","import React, { Fragment, useState, useEffect } from 'react';\r\nimport { connect } from 'react-redux';\r\nimport * as plusActions from \"../../../../store/actions/Plus\";\r\nimport { Modal, Animation, Alert } from 'rsuite';\r\nimport CreateDevice from './CreateDevice';\r\nimport empty_modules_plus from \"../../../../imgs/box.svg\";\r\nimport { track } from \"@amplitude/analytics-browser\";\r\nimport InputRounded from '../../../shared/utilities/InputRounded';\r\n\r\nconst DataAppliances = ({ value, property, unit, theme }) => {\r\n return (\r\n {props.language.tag_new_device_main_title}
\r\n \r\n
\r\n {props.language.tag_new_device_title_name}
\r\n \r\n setAppliance({...appliance, custom_name: target.value})} error={focus === 1 ? error : \"\"}/>\r\n
\r\n {props.language.tag_new_device_title_type}
\r\n \r\n setAppliance({...appliance, type: target.value})} error={focus === 2 ? error : \"\"}/>\r\n
\r\n {props.language.tag_new_device_title_brand}
\r\n \r\n setAppliance({...appliance, brand: target.value})}/>\r\n
\r\n {props.language.tag_new_device_title_reference}
\r\n \r\n setAppliance({...appliance, reference: target.value})}/>\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nconst Devices = ({ item, language, onChange, appliancesSelected, theme }) => {\r\n const [showInfoDevice, setShowInfoDevice] = useState(false);\r\n\r\n useEffect(() => {\r\n onChange(appliancesSelected);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [appliancesSelected]);\r\n\r\n return (\r\n {property}
\r\n \r\n
\r\n {value}
\r\n {unit}
\r\n setShowInfoDevice(!showInfoDevice)}>\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {item.custom_name}
\r\n \r\n {item.id_tag ?\r\n \r\n \r\n :\r\n
\r\n \r\n
\r\n }\r\n {language.tag_new_tag_text_no_tag}
\r\n \r\n {\r\n if (!appliancesSelected.includes(item.id_appliance)) {\r\n onChange([...appliancesSelected, item.id_appliance]);\r\n Alert.success(language.alert_create_new_tag_associated_tags);\r\n setShowInfoDevice(false);\r\n }\r\n }}\r\n className={`button-fill-brand gap-2 py-2 px-3 rounded-pill label-medium-medium button-content-equal pe-pointer ${theme}`}>{language.tag_new_tag_button_link_tag}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n { setAppliancesSelected([]); setShow(false); }}>{language.tag_new_tag_header_label_cancel}
\r\n {language.tag_new_tag_header_label_tag}
\r\n {\r\n addTags({ id_appliance: appliancesSelected, initial_timestamp: pointOne / 1000, final_timestamp: pointTwo ? pointTwo / 1000 : null });\r\n track('Plus graphic tag created');\r\n setAppliancesSelected([]);\r\n setShow(false);\r\n }}>\r\n {language.tag_new_tag_header_label_save}\r\n
\r\n \r\n setSearch(target.value)}\r\n value={search}\r\n icon={search}\r\n py={2}\r\n theme={theme}\r\n />\r\n setAppliancesSelected(value)} appliancesSelected={appliancesSelected} theme={theme} />\r\n ) \r\n :
\r\n {language.tag_new_tag_title_devices_list}
\r\n {devices.length ? devices.map((item, index) =>\r\n \r\n 
\r\n
}\r\n \r\n {language.tag_new_tag_text_no_devices}\r\n
\r\n {language.tag_new_tag_text_no_devices_description}
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {language.plus_export_graph_title}
\r\n\r\n
\r\n \r\n \r\n {state => (\r\n
\r\n {language.plus_export_graph_date}
\r\n setShowCalendar(!showCalendar)}>\r\n
\r\n {focus === 1 ? {payloadToExport.startTime ? payloadToExport.startTime.split(\" \")[0] : \"Selecciona la fecha\"}
\r\n \r\n{error}
: null}\r\n\r\n }\r\n prevLabel={}\r\n onChange={value => {\r\n const date = moment(value).format(\"YYYY-MM-DD\");\r\n setPayloadToExport({ ...payloadToExport, startTime: `${date} 00:00:00`, endTime: `${date} 23:59:59` });\r\n setShowCalendar(false);\r\n }} />\r\n
\r\n )}\r\n \r\n \r\n setPayloadToExport({ ...payloadToExport, nameFile: target.value })}\r\n value={payloadToExport?.nameFile}\r\n error={focus === 2 ? error : \"\"}\r\n theme={theme}\r\n />\r\n
\r\n \r\n setPayloadToExport({ ...payloadToExport, request: value })}\r\n width={353}\r\n theme={theme}\r\n type_label='label-small-regular'\r\n />\r\n
\r\n \r\n {stepDownload === 1 ?\r\n
\r\n \r\n \r\n
\r\n :\r\n stepDownload === 2 ?\r\n {`El reporte ${payloadToExport.nameFile} se está creando.`}
\r\n \r\n \r\n
\r\n : null}\r\n {`El reporte ${payloadToExport.nameFile} se está descargando.`}
\r\n \r\n \r\n
\r\n \r\n {[0, 1, 2].map((_item, index) => ())}\r\n
\r\n );\r\n};\r\n\r\n\r\nconst getInitPage = (timezone) => {\r\n const initPageByTime = new Date().toLocaleString(\"en-US\", { timeZone: timezone });\r\n return new Date(initPageByTime).getHours();\r\n}\r\n\r\n\r\nconst graphLoadingContainer = (loading, language, theme) => \r\n \r\n {state => (\r\n
;\r\n\r\nconst LoadingHistoryData = () =>\r\n \r\n
\r\n )}\r\n \r\n\r\n
\r\n \r\n
;\r\n\r\nconst VictoryZoomContainer = createContainer('zoom', 'voronoi');\r\n\r\nconst areaStyle = theme => {\r\n return ({\r\n data: {\r\n fill: `url(#linearGreenTransparent25${theme !== 'dark' ? 'Light' : ''})`,\r\n stroke: `var(--brand-primary-${theme === 'dark' ? '500': '600'})`,\r\n strokeWidth: 2\r\n }\r\n })\r\n}\r\n\r\n\r\nconst Graph = (props) => {\r\n\r\n const history = useHistory();\r\n\r\n const { theme } = props;\r\n\r\n const formatNumber = number => {\r\n if (Math.abs(number) >= 500) {\r\n number = (number / 1000).toFixed(2);\r\n return (`${number} k`)\r\n }\r\n else {\r\n return (`${(number).toFixed(2)} `);\r\n }\r\n }\r\n\r\n const defaultOption = {\r\n id: 1,\r\n property: \"active_power\",\r\n title: props.language.plus_graph_picker_option_active_power,\r\n unit: \"W\"\r\n }\r\n\r\n const pointTagDragInit = { x: 0, y: 0, positionX: 0 };\r\n\r\n const [options, setOptions] = useState(defaultOption);\r\n\r\n const [day, setDay] = useState(0);\r\n\r\n const [data, setData] = useState([]);\r\n\r\n const [domain, setDomain] = useState(null);\r\n const [entireDomain, setEntireDomain] = useState(null);\r\n const [showStreaming, setShowStreaming] = useState(true);\r\n const [indicatorZoom, setIndicatorZoom] = useState(1);\r\n const [zoomMinutes, setZoomMinutes] = useState(10);\r\n const [showExportGraph, setShowExportGraph] = useState(false);\r\n const [grabbing, setGrabbing] = useState(false);\r\n const [grabbingTag, setGrabbingTag] = useState(false);\r\n const [pointTagDrag, setPointTagDrag] = useState(pointTagDragInit);\r\n const [enableTag, setEnableTag] = useState(false);\r\n const [pointOne, setPointOne] = useState(null);\r\n const [pointTwo, setPointTwo] = useState(null);\r\n const [active1, setActive1] = useState(true);\r\n const [active2, setActive2] = useState(false);\r\n const [showCreateTag, setShowCreateTag] = useState(false);\r\n const [pointTooltip, setPointTooltip] = useState(null);\r\n const [showTooltip, setShowTooltip] = useState(false);\r\n const [dataDomain, setDataDomain] = useState([]);\r\n const [enableLoaderGraph, setEnableLoaderGraph] = useState(false);\r\n\r\n\r\n let dataGraph = props.dataGraph;\r\n let paddingDomain = 1.1;\r\n let deviceActive = props.devices.filter(value => value?.id_service === props.activeServicesPlus[0]?.idService)[0];\r\n\r\n useEffect(() => {\r\n if (!showCreateTag) {\r\n setPointTagDrag(pointTagDragInit);\r\n }\r\n // eslint-disable-next-line\r\n }, [showCreateTag]);\r\n\r\n useEffect(() => {\r\n if (!props.devices.length) {\r\n props.loadDevices()\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (props.devices.length && props.activeServicesPlus.length && !props.loadingData) {\r\n setIndicatorZoom(1);\r\n setZoomMinutes(10);\r\n props.loadInitData(getInitPage(deviceActive?.timezone) + 1);\r\n setDomain(null);\r\n setShowStreaming(true);\r\n setEnableTag(false);\r\n setEnableLoaderGraph(false);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [props.devices, props.activeServicesPlus]);\r\n\r\n useEffect(() => {\r\n if (dataGraph?.length > 0) {\r\n const minValueY = _.minBy(dataGraph, d => d[options.property])[options.property];\r\n const maxValueY = _.maxBy(dataGraph, d => d[options.property])[options.property];\r\n const intervalY = [minValueY < 0 ? minValueY * paddingDomain : 0, maxValueY < 0 ? 0 : maxValueY * paddingDomain];\r\n const intervalX = [dataGraph[0].time, _.last(dataGraph).time];\r\n setEntireDomain({ x: intervalX, y: intervalY });\r\n if (!domain) {\r\n const filtered = dataGraph.slice(- zoomMinutes * 60);\r\n const minValueYDomain = _.minBy(filtered, d => d[options.property])[options.property];\r\n const maxValueYDomain = _.maxBy(filtered, d => d[options.property])[options.property];\r\n const intervalYDomain = [minValueYDomain < 0 ? minValueYDomain * paddingDomain : 0, maxValueYDomain < 0 ? 0 : maxValueYDomain * paddingDomain];\r\n setDomain({ x: [intervalX[1] - zoomMinutes * 60 * 1000 < intervalX[0] ? intervalX[0] : intervalX[1] - zoomMinutes * 60 * 1000, intervalX[1]], y: intervalYDomain });\r\n //setPointTagDrag({...pointTagDrag, x: intervalX[0], y: dataGraph[0][options.property]});\r\n }\r\n if (showStreaming && data.length) {\r\n const filtered = data.slice(- zoomMinutes * 60);\r\n const minValueYDomain = _.minBy(filtered, d => d[options.property])[options.property];\r\n const maxValueYDomain = _.maxBy(filtered, d => d[options.property])[options.property];\r\n const intervalYDomain = [minValueYDomain < 0 ? minValueYDomain * paddingDomain : 0, maxValueYDomain < 0 ? 0 : maxValueYDomain * paddingDomain];\r\n setDomain({ x: [intervalX[1] - zoomMinutes * 60 * 1000 < intervalX[0] ? intervalX[0] : intervalX[1] - (zoomMinutes) * 60 * 1000, intervalX[1]], y: intervalYDomain });\r\n }\r\n }\r\n else {\r\n setDomain(null);\r\n setShowStreaming(true);\r\n setData([]);\r\n setIndicatorZoom(1);\r\n setZoomMinutes(5);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [dataGraph, options, showStreaming, theme]);\r\n\r\n useEffect(() => {\r\n if (data?.length > 0) {\r\n const minValueY = _.minBy(data, d => d[options.property])[options.property];\r\n const maxValueY = _.maxBy(data, d => d[options.property])[options.property];\r\n const intervalY = [minValueY < 0 ? minValueY * paddingDomain : 0, maxValueY < 0 ? 0 : maxValueY * paddingDomain];\r\n setDomain({ ...domain, y: intervalY });\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [options])\r\n\r\n useEffect(() => {\r\n if (domain) {\r\n const widthDomain = props.graphContinerWidth - 108;\r\n const timeStampEstimated = parseInt(((pointTagDrag?.positionX * (domain?.x[1] - domain?.x[0]) / (widthDomain * 1000)) + (domain?.x[0] / 1000)).toFixed(0) * 1000);\r\n const itemSelected = data.filter(item => item?.time === timeStampEstimated);\r\n const valueY = itemSelected.length ? itemSelected[0][options.property] : pointTagDrag.y;\r\n setPointTagDrag({ ...pointTagDrag, x: timeStampEstimated, y: valueY });\r\n let filtered = dataGraph.filter(item => item.time >= domain?.x[0] - 120000 && item?.time <= domain?.x[1] + 120000);\r\n setDataDomain(dataGraph.filter(item => item.time >= domain?.x[0] && item?.time <= domain?.x[1]))\r\n if (filtered.length > 1200) {\r\n const k = Math.ceil(filtered.length / 1200);\r\n filtered = filtered.filter((_d, i) => ((i % k) === 0));\r\n }\r\n setData(filtered);\r\n const dataGraphNoInit = props.dataGraphPage.filter(item => !item?.init);\r\n const firstAvailablePage = dataGraphNoInit.length ? dataGraphNoInit[0]?.page : getInitPage(deviceActive?.timezone);\r\n const intervalLeft = (domain?.x[0] - entireDomain?.x[0]) / 60000;\r\n const verifyPageLeft = props.dataGraphPage.filter(item => item?.page === firstAvailablePage - 1);\r\n if (intervalLeft <= 60 && !props.enableHistory && !verifyPageLeft.length && (dataGraph.length >= 1800 || (!(dataGraph.length >= 1800) && deviceActive?.id_infrastructure !== 2))) {\r\n props.loadHistoryData(handleBeforeDay(firstAvailablePage - 1), false);\r\n }\r\n if (props.dataGraphPage.length >= 3) {\r\n const lastAvailablePage = _.last(dataGraphNoInit)?.page;\r\n const lastValueX = _.last(props.dataGraphPage[props.dataGraphPage.length - 2]?.data)?.time;\r\n const intervalRight = (lastValueX - domain?.x[1]) / 60000;\r\n const verifyPage = props.dataGraphPage.filter(item => item?.page === lastAvailablePage + 1);\r\n if (intervalRight <= 60 && !verifyPage.length && !props.enableHistory && lastAvailablePage + 1 !== _.last(props.dataGraphPage).page - 1) {\r\n props.loadHistoryData(handleAfterDay(lastAvailablePage + 1), false);\r\n }\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [domain, props.activeServicesPlus]);\r\n\r\n const handleBeforeDay = page => {\r\n if (page > 0) return { page: page, day: day, type: 0 }\r\n else {\r\n setDay(day + 1);\r\n return { page: 24, day: day + 1, type: 0 };\r\n }\r\n }\r\n\r\n const handleAfterDay = page => {\r\n if (page < 25) return { page: page, day: day, type: 1 }\r\n else {\r\n setDay(day - 1);\r\n return { page: 1, day: day - 1, type: 1 };\r\n }\r\n }\r\n\r\n const handleZoomIn = (e) => {\r\n e.stopPropagation();\r\n const minutes = 5;\r\n const zoom = minutes * 60 * 1000;\r\n if (domain?.x[0] + zoom <= domain?.x[1] - zoom) {\r\n setDomain({ ...domain, x: [domain?.x[0] + zoom, domain?.x[1]] });\r\n setZoomMinutes(zoomMinutes - minutes);\r\n setIndicatorZoom(0);\r\n }\r\n else {\r\n setIndicatorZoom(1);\r\n }\r\n }\r\n\r\n const handleZoomOut = (e) => {\r\n e.stopPropagation();\r\n const minutes = 5;\r\n const zoom = -minutes * 60 * 1000;\r\n const zoomOutMax = 20 * 60 * 1000;\r\n if (domain?.x[1] - domain?.x[0] - zoom <= zoomOutMax) {\r\n setDomain({ ...domain, x: [domain?.x[0] + zoom, domain?.x[1]] });\r\n setZoomMinutes(zoomMinutes + minutes);\r\n setIndicatorZoom(0);\r\n }\r\n else {\r\n setIndicatorZoom(-1);\r\n }\r\n }\r\n\r\n\r\n const DotSliderLine = ({ positionX }) => {\r\n const positionAdjusted = ((props.graphContinerWidth - 60) / (props.graphContinerWidth - 108)) * positionX + 20\r\n return (\r\n \r\n {gradients(theme)}\r\n {props.activeServicesPlus.length ?\r\n
\r\n \r\n {!props.loadingData ?\r\n \r\n :\r\n
:\r\n \r\n {!data.length ?\r\n \r\n }\r\n {active2 && enableTag && \r\n }\r\n {!data.length ?\r\n \r\n \r\n }\r\n
\r\n \r\n
:\r\n \r\n
\r\n {capitalizedText(moment.utc(domain?.x[1]).format('dddd, DD MMMM, YYYY'))}
\r\n\r\n
\r\n \r\n \r\n setShowExportGraph(true)}\r\n theme={theme}\r\n />\r\n
\r\n \r\n
\r\n }\r\n \r\n
\r\n {capitalizedText(moment.utc(domain?.x[1]).format('dddd, DD MMMM, YYYY'))}
\r\n\r\n
\r\n \r\n \r\n setShowExportGraph(true)}\r\n theme={theme}\r\n />\r\n
\r\n \r\n
\r\n {enableTag && !active2 && \r\n
\r\n e.stopPropagation()}>\r\n \r\n
\r\n {options.title}
\r\n \r\n \r\n
\r\n {`${dataDomain.length ? formatNumber(_.last(dataDomain)[options.property]) : '---'}${options.unit}`}
\r\n {props.language.plus_graph_text_help_tag_step_1}
\r\n {props.language.plus_graph_text_help_tag_step_2}
\r\n \r\n \r\n {\r\n setDay(props.lastDay);\r\n //setPage(props.lastPage);\r\n await props.loadHistoryData({ page: props.lastPage, day: props.lastDay, type: 0 }, true);\r\n }}\r\n >\r\n {props.language.plus_graph_button_show_last_records_device}\r\n */}\r\n
:\r\n {props.language.plus_graph_text_empty_data_device}
\r\n{props.language.plus_graph_text_last_connection}{props.lastConection}
\r\n {/* setGrabbing(true)} onMouseUp={() => setGrabbing(false)} onMouseEnter={() => setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)}>\r\n
\r\n {enableTag ?\r\n \r\n {\r\n const minValueY = _.minBy(data, d => d[options.property])[options.property];\r\n const maxValueY = _.maxBy(data, d => d[options.property])[options.property];\r\n const intervalY = [minValueY < 0 ? minValueY * paddingDomain : 0, maxValueY < 0 ? 0 : maxValueY * paddingDomain];\r\n setDomain({ x: domainZoom?.x, y: intervalY });\r\n if (domain?.x[1] === entireDomain?.x[1]) setShowStreaming(true);\r\n else setShowStreaming(false);\r\n setEnableLoaderGraph(true);\r\n }}\r\n activateData={false}\r\n onActivated={enableTag ? null : (point => setPointTooltip(point[0]))}\r\n />}>\r\n }>} \r\n style={{ \r\n axis: { stroke: \"transparent\" }, \r\n grid: {\r\n fill: theme === 'dark' ? \"var(--white)\" : \"var(--black)\", \r\n stroke: theme === 'dark' ? \"var(--white)\" : \"var(--black)\", \r\n pointerEvents: \"painted\",\r\n strokeWidth: 1,\r\n opacity: 0.2 },\r\n tickLabels: {fill: theme === 'dark' ? \"var(--white)\" : \"var(--black)\", fontFamily: 'Inter', fontSize: 10}}} />\r\n {enableTag ?
\r\n {(props.enableHistory && domain?.x[0] === entireDomain?.x[0] && enableLoaderGraph) ? \r\n setGrabbingTag(true)}\r\n onStop={() => setGrabbingTag(false)}\r\n onDrag={(e, point) => {\r\n const widthDomain = props.graphContinerWidth - 108;\r\n const timeStampEstimated = parseInt(((point?.x * (domain?.x[1] - domain?.x[0]) / (widthDomain * 1000)) + (domain?.x[0] / 1000)).toFixed(0) * 1000);\r\n const itemSelected = data.filter(item => item?.time === timeStampEstimated);\r\n const valueY = itemSelected.length ? itemSelected[0][options.property] : pointTagDrag.y;\r\n setPointTagDrag({ x: timeStampEstimated, y: valueY, positionX: point?.x });\r\n }}\r\n bounds={{ left: 0, right: props.graphContinerWidth - 108 }}>\r\n
: null}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {moment.utc(pointTagDrag?.x).format('HH:mm:ss')}\r\n
\r\n \r\n {formatNumber(pointTagDrag?.y)}{options.unit}\r\n
\r\n \r\n {domain?.x &&
\r\n {!showStreaming ?\r\n {moment.utc(domain?.x[0]).format('HH:mm:ss')}
}\r\n {domain?.x &&{moment.utc(domain?.x[1] - ((domain?.x[1] - domain?.x[0]) / 2)).format('HH:mm:ss')}
}\r\n {domain?.x &&{moment.utc(domain?.x[1]).format('HH:mm:ss')}
}\r\n\r\n
: null}\r\n {!enableTag ?\r\n setShowStreaming(true)}>\r\n
\r\n {props.language.graphs_go_back_button}
\r\n \r\n \r\n {!data.length ? null :\r\n \r\n }\r\n \r\n \r\n \r\n
:\r\n active1 ?\r\n \r\n \r\n \r\n \r\n
:\r\n \r\n \r\n \r\n \r\n
\r\n }\r\n {graphLoadingContainer(props.loadingData, props.language, theme)}
\r\n }\r\n \r\n
\r\n }\r\n \r\n \r\n
\r\n {props.language.plus_graph_text_empty_data_device}
\r\n{item.title}
\r\n\r\n {item.icon && }\r\n
\r\n {item.value}
\r\n\r\n {item.kpi && }\r\n
\r\n );\r\n};\r\n\r\n\r\nconst Cards = props => {\r\n\r\n const size = useWindowSize();\r\n const { theme } = props;\r\n\r\n const RenderWidgetsEmpty = () => {\r\n return (\r\n {item.text}
\r\n\r\n \r\n
\r\n )\r\n };\r\n\r\n return (\r\n {props.language.energy_widgets_empty_data}
\r\n \r\n track('Plus widget clicked', { Widget_Back: 'activate' })}\r\n >\r\n \r\n
\r\n \r\n \r\n \r\n {props.indicators.length ?\r\n = 1400 ? 3 : 2}\r\n navigation={{ nextEl: \"#next-slide\", prevEl: \"#prev-slide\" }}>\r\n {props.indicators.map((card, i) =>\r\n \r\n )}\r\n :\r\n = 1400 ? 3 : 2}\r\n navigation={{ nextEl: \"#next-slide\", prevEl: \"#prev-slide\" }}>\r\n {[0, 1, 2].map((i) =>\r\n \r\n )}\r\n \r\n }\r\n
\r\n \r\n \r\n
)\r\n};\r\n\r\nconst RenderCardEmpty = ({ language, theme }) => {\r\n return (\r\n \r\n { theme === 'dark' ?\r\n :\r\n 
\r\n }\r\n
\r\n )\r\n};\r\n\r\nconst Radar = props => {\r\n\r\n let dataGraph = props.dataGraph;\r\n const { theme } = props;\r\n\r\n const states = [\r\n { type: 0, streaming: 'rms_voltage_', indicator: 'v', label: \"Voltaje\", gradient: `url(#radialGreen${theme !== 'dark' ? \"Light\" : \"\"}Gradient)`, stroke: \"var(--brand-primary-500)\", color: 'brand-primary-500', unit: \"V\", info: props.language.plus_radar_tooltip_info_voltage },\r\n { type: 1, streaming: 'rms_current_', indicator: 'c', label: \"Corriente\", gradient: `url(#radialPurple${theme !== 'dark' ? \"Light\" : \"\"}Gradient)`, stroke: `${theme !== 'dark' ? \"var(--purple-600)\" : \"var(--purple-500)\"}`, color: `${theme !== 'dark' ? \"purple-600\" : \"purple-500\"}`, unit: \"A\", info: props.language.plus_radar_tooltip_info_current },\r\n { type: 2, streaming: 'active_power_', indicator: 'p', label: \"Potencia\", gradient: `url(#radialBlue${theme !== 'dark' ? \"Light\" : \"\"}Gradient)`, stroke: `${theme !== 'dark' ? \"var(--blue-600)\" : \"var(--blue-500)\"}`, color: `${theme !== 'dark' ? \"blue-600\" : \"blue-500\"}`, unit: \"W\", info: props.language.plus_radar_tooltip_info_power }\r\n ];\r\n\r\n useEffect(() => {\r\n if (props.activeServicesPlus.length) props.loadEnergyQuality();\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [props.activeServicesPlus]);\r\n\r\n let deviceActive = props.devices.filter(value => value?.id_service === props.activeServicesPlus[0]?.idService)[0];\r\n\r\n return (\r\n \r\n {language.plus_graph_title_empty_data}\r\n
\r\n \r\n track('Quality widget clicked', {Widget_Back: 'activate'})}>\r\n {/* */}\r\n
\r\n {props.language.plus_radar_title}
\r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n track('Quality widget clicked', {Widget_Forward: 'activate'})}>\r\n {/* */}\r\n
\r\n \r\n :\r\n \r\n track('Quality widget clicked', {Widget_Back: 'activate'})}>\r\n {/* */}\r\n
\r\n \r\n {\r\n !props.openQualityEnergy ?\r\n \r\n \r\n {[states[props.indexVariable]].map((state, index) =>\r\n \r\n )}\r\n \r\n
\r\n track('Quality opened')} className=\"position-absolute right-0 zindex-2 row-center me-3\">\r\n \r\n
\r\n : null\r\n }\r\n \r\n
\r\n {deviceActive?.phases === 3 ?\r\n \r\n {/*
\r\n {state.label}
\r\n\r\n
*/}\r\n \r\n {state?.label}\r\n
\r\n \r\n \r\n
;\r\n\r\nconst axisStyle = {\r\n tickLabels: {\r\n fill: \"#FFF\",\r\n fontSize: 28,\r\n fontFamily: \"Inter\",\r\n fontWeight: 900\r\n },\r\n ticks: { size: 15 },\r\n axis: { stroke: \"transparent\" },\r\n}\r\n\r\nconst handlerFormatAxis = dow => {\r\n switch (dow) {\r\n case 1:\r\n return 'L';\r\n case 2:\r\n return 'M';\r\n case 3:\r\n return 'W';\r\n case 4:\r\n return 'J';\r\n case 5:\r\n return 'V';\r\n case 6:\r\n return 'S';\r\n case 7:\r\n return 'D';\r\n default:\r\n return '';\r\n }\r\n};\r\n\r\nconst RenderCardEmpty = ({ language }) => {\r\n return (\r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nconst AlwaysOn = (props) => {\r\n\r\n const [avgData, setAvgData] = useState(0);\r\n\r\n useEffect(() => {\r\n if (props.activeServicesPlus.length) props.loadAlwaysOn()\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [props.activeServicesPlus]);\r\n\r\n useEffect(() => {\r\n if (props.alwaysOn.length) {\r\n const dataValues = props.alwaysOn.filter(x => x.value > 0);\r\n if (dataValues.length) {\r\n const avg = _.mean(dataValues.map(x => x.value));\r\n setAvgData(avg);\r\n }\r\n }\r\n }, [props.alwaysOn]);\r\n\r\n return (\r\n \r\n {language.plus_graph_title_empty_data}\r\n
\r\n \r\n {!props.loadingAlwaysOn ? !props.alwaysOn.length ?\r\n
\r\n );\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n activeServicesPlus: state.services.activeServicesPlus,\r\n alwaysOn: state.plus.alwaysOn,\r\n loadingAlwaysOn: state.plus.loadingAlwaysOn,\r\n language: state.shared.language\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n loadAlwaysOn: () => dispatch(plusActions.loadAlwaysOn()),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(AlwaysOn);\r\n\r\n\r\n","import React, { Fragment, useEffect } from 'react';\r\n\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as plusActions from \"../../../../store/actions/Plus\";\r\n\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { fal } from '@fortawesome/pro-light-svg-icons'\r\n\r\nimport ContentLoader from \"react-content-loader\";\r\n\r\nimport Tooltip from '../../../shared/utilities/Tooltip';\r\n\r\nconst loadingContainer = \r\n
:\r\n {props.language.plus_always_on_title}
\r\n\r\n
\r\n \r\n \r\n `${handlerFormatAxis(x)}`} style={axisStyle} />\r\n `${datum.value} Wh`}\r\n labelComponent={ (datum.value >= avgData ? \"#161617\" : \"#FFF\"), fontSize: 24, fontFamily: \"Inter\", fontWeight: 900 }} angle={270} />}\r\n cornerRadius={{ bottomLeft: 35, bottomRight: 35, topLeft: 35, topRight: 35 }}\r\n style={{ data: { fill: ({ datum }) => (datum.value >= avgData ? \"url(#linearRedOrangeGradient)\" : \"#323234\") } }} />\r\n \r\n
\r\n :\r\n \r\n
\r\n \r\n
\r\n \r\n track('Standby opened')}>\r\n \r\n {props.language.plus_always_on_title}
\r\n{loadingContainer}
}\r\n \r\n \r\n
;\r\n\r\nconst Location = ({ name, consumption, image, state, style }) => {\r\n\r\n // const iconState = () => {\r\n // if (state === 0) return \r\n // if (state === 1) return \r\n // return \r\n // }\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nconst RenderCardEmpty = ({ language }) => {\r\n return (\r\n \r\n
\r\n \r\n {image && 
}\r\n
\r\n {name}
\r\n {consumption}
\r\n \r\n
\r\n )\r\n};\r\n\r\nconst Rank = (props) => {\r\n\r\n useEffect(() => {\r\n if (props.activeServicesPlus.length) props.loadComparatives()\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [props.activeServicesPlus]);\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n ---
\r\n --- KWh
\r\n \r\n \r\n
\r\n \r\n
:\r\n {props.language.plus_rank_title}
\r\n\r\n
:\r\n \r\n
\r\n {props.language.plus_rank_title}
\r\n\r\n {props.comparatives.slice(0, 3).map((value, i) => (\r\n
\r\n {loadingContainer}
}\r\n \r\n
\r\n }>\r\n \r\n
\r\n \r\n setSearch(target.value)} />\r\n \r\n
\r\n {props.availableTypeServices.length > 1 &&\r\n \r\n {\r\n servicesTypes.filter(s => props.availableTypeServices.includes(s.key)).map((item) => {\r\n\r\n const isSelected = servicesActive.includes(item.key);\r\n const isDisabled = disabledServices.includes(item.key);\r\n\r\n return (\r\n
\r\n }\r\n {props.allowAllServices ?\r\n {\r\n if (isSelected) {\r\n if (typesSelected.length > 1)\r\n setTypesSelected([...typesSelected.filter(t => t !== item.key)]);\r\n } else {\r\n !isDisabled && setTypesSelected([...typesSelected, item.key]); \r\n }\r\n }}>\r\n \r\n
\r\n )\r\n }\r\n )}\r\n {item.title}
\r\n { if (!selectedAllServices) { props.selectFunction(totalServices) } else { props.selectFunction([activeServices[0]]) } }}>\r\n
: null\r\n }\r\n {props.language.services_select_all}
\r\n \r\n \r\n {services.map((item) => {\r\n\r\n const isSelected = props.activeServices.findIndex(i => i.idService === item.idService) >= 0;\r\n\r\n return (\r\n
\r\n {\r\n\r\n let services = props.activeServices;\r\n\r\n if (isSelected) {\r\n if (services.length > 1) {\r\n services = services.filter(i => i.idService !== item.idService);\r\n props.selectFunction([...services]);\r\n }\r\n }\r\n else {\r\n services = [...services, item];\r\n if (services.length < 4) props.selectFunction([...services]); \r\n track(props?.module === 'alwaysOn' ? 'Standby project selected' : 'Plus project selected', {Project_ID: services[services.length - 1]?.name})\r\n }\r\n setShow(false);\r\n props.setShowBlackScreen(false);\r\n setFocus(false);\r\n }}>\r\n
\r\n )\r\n })}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {isSelected && }\r\n {item.name}
\r\n {item.address}
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n account: state.accounts.account,\r\n servicesTypes: state.services.servicesTypes,\r\n totalServices: state.services.totalServices,\r\n selectFunction: ownProps.selectFunction,\r\n activeServices: ownProps.activeServices,\r\n allowAllServices: ownProps.allowAllServices,\r\n availableTypeServices: ownProps.availableTypeServices,\r\n language: state.shared.language,\r\n theme: state.theme.theme,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n loadServicesAsync: (payload) => dispatch(servicesActions.loadServicesAsync(payload)),\r\n setShowBlackScreen: (payload) => dispatch(sharedActions.setShowBlackScreen(payload)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Services);","import React from \"react\";\r\nimport { connect } from 'react-redux';\r\n\r\nimport ContentLoader from \"react-content-loader\"\r\n\r\nimport * as servicesActions from '../../../../store/actions/Services';\r\n\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { fal } from '@fortawesome/pro-light-svg-icons';\r\n\r\nimport Services from \"../../../shared/Services\";\r\n\r\nimport _ from 'lodash';\r\n\r\nconst servicesLoading = (\r\n \r\n \r\n \r\n
\r\n)\r\n\r\nconst ServicesPlus = (props) => {\r\n const { theme } = props;\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n activeServicesPlus: state.services.activeServicesPlus,\r\n language: state.shared.language,\r\n theme: state.theme.theme,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n setActiveServicesPlus: (payload) => dispatch(servicesActions.setActiveServicesPlus(payload)),\r\n setActiveServicesEnergy: (payload) => dispatch(servicesActions.setActiveServicesEnergy(payload))\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(ServicesPlus);","import React, { useEffect, useRef, useState, Fragment } from \"react\";\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as servicesActions from '../../store/actions/Services';\r\nimport * as plusActions from \"../../store/actions/Plus\";\r\n\r\nimport Graph from \"./dashboard/graphs/Graph\";\r\nimport Cards from \"./dashboard/cards/Cards\";\r\nimport Radar from \"./dashboard/modules/Radar\";\r\nimport AlwaysOn from \"./dashboard/modules/AlwaysOn\";\r\nimport Rank from \"./dashboard/modules/Rank\";\r\nimport ServicesPlus from \"./dashboard/shared/ServicesContainer\";\r\n\r\nimport { useWindowSize } from '../shared/utilities/useWindowSize';\r\n\r\nimport ContentLoader from \"react-content-loader\";\r\nimport Header from \"../shared/Header\";\r\n\r\nconst IndicatorsLoading = props => {\r\n const {theme} = props;\r\n return (\r\n \r\n { props.setActiveServicesPlus([_.last(value)]); props.setActiveServicesEnergy([_.last(value)]) }} />\r\n
\r\n \r\n
\r\n {props.language.energy_main_title_dashboard}
\r\n {props.activeServicesPlus.length ?\r\n\r\n
:\r\n {props.activeServicesPlus[0]?.name}
\r\n {servicesLoading}
\r\n }\r\n \r\n \r\n
)\r\n};\r\n\r\n\r\nconst Plus = props => {\r\n\r\n const {theme} = props;\r\n\r\n const size = useWindowSize();\r\n\r\n const graphContiner = useRef(null);\r\n\r\n const [graphContinerWidth, setGraphContinerWidth] = useState(0);\r\n\r\n const empty = props.activeServicesPlus.length === 0 || typeof (props.activeServicesPlus[0]) == 'undefined';\r\n\r\n let account = props.account;\r\n\r\n const setIndicators = props.setIndicators;\r\n const setEnergyQuality = props.setEnergyQuality;\r\n const setAlwaysOn = props.setAlwaysOn;\r\n const setComparatives = props.setComparatives;\r\n const setOpenQualityEnergy = props.setOpenQualityEnergy;\r\n\r\n useEffect(() => {\r\n if (!props.activeServicesPlus?.length) {\r\n props.loadServicesAsync();\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [props.account]);\r\n\r\n useEffect(() => {\r\n if (!empty) setGraphContinerWidth(graphContiner.current.getBoundingClientRect().width)\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [size, empty]);\r\n\r\n useEffect(() => {\r\n if (props.dataGraph.length) {\r\n props.resetData();\r\n }\r\n if (props.activeServicesPlus.length) {\r\n props.loadIndicators();\r\n } else {\r\n setIndicators([]);\r\n setEnergyQuality(null);\r\n setAlwaysOn([]);\r\n setComparatives([]);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [props.activeServicesPlus, account]);\r\n\r\n useEffect(() => {\r\n setOpenQualityEnergy(false);\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n const RenderEmptyService = () => {\r\n return (\r\n \r\n
\r\n )\r\n };\r\n\r\n return (\r\n {props.language.plus_modal_title_empty_state}
\r\n{props.language.plus_modal_description_empty_state}
\r\n{props.language.plus_modal_phrase_empty_state}
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {props.loadingIndicators ?\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {props.loadingIndicators ?\r\n
\r\n \r\n
\r\n );\r\n\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n user: state.users.user,\r\n account: state.accounts.account,\r\n language: state.shared.language,\r\n screenPaddingBottom: state.shared.screenPaddingBottom,\r\n theme: state.theme.theme\r\n});\r\n\r\nexport default connect(mapStateToProps)(Efficiency)","import React, {useState, useEffect} from \"react\";\r\nimport { connect } from 'react-redux';\r\n\r\nimport { VictoryChart, VictoryBar, VictoryAxis, VictoryLabel, VictoryGroup, VictoryZoomContainer, Rect } from \"victory\";\r\n\r\nimport _ from 'lodash';\r\n\r\nimport empty_data_tag from \"../../../../imgs/empty-data-tag.svg\";\r\nimport empty_data_tag_light from \"../../../../imgs/empty-data-tag-light.svg\";\r\n\r\n\r\nconst axisStyle = theme => {\r\n return ({\r\n axis: {\r\n stroke: \"transparent\",\r\n strokeOpacity: 0.2,\r\n fontFamily: \"Inter\"\r\n }, \r\n ticks: {\r\n stroke: \"transparent\",\r\n size: 5\r\n },\r\n tickLabels: {\r\n fontSize: 12,\r\n padding: 5,\r\n fill: theme === 'dark' ? \"var(--white)\" : \"var(--black)\",\r\n }\r\n})}\r\n\r\n\r\nconst GraphPower = (props) => {\r\n \r\n const {theme} = props;\r\n const tag = props.data.length > 0 && props.data.filter(x => x.processed).length > 0; \r\n const [grabbing, setGrabbing] = useState(false); \r\n const [domain, setDomain] = useState(null);\r\n const [entireDomain, setEntireDomain] = useState(null);\r\n\r\n useEffect(() => {\r\n if(props.data.length){\r\n const maxValueY = _.maxBy(props.data, d => d?.active_power)?.active_power * 1.1;\r\n const intervalY = [0, maxValueY];\r\n const intervalX = [1, props.data.length + 1];\r\n setEntireDomain({x: intervalX, y: intervalY});\r\n setDomain({x: [props.data.length - 3 < 1 ? 0 : props.data.length - 3, props.data.length + 1], y: intervalY});\r\n }\r\n }, [props.data])\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n {!props.loadingData && (\r\n
\r\n )\r\n}\r\n\r\nconst mapStateToProps = (state) => ({ \r\n language: state.shared.language,\r\n theme: state.theme.theme,\r\n});\r\n\r\nexport default connect(mapStateToProps)(GraphPower);","import React, { Fragment, useEffect, useRef, useState } from \"react\";\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as servicesActions from '../../../../store/actions/Services';\r\nimport * as plusActions from '../../../../store/actions/Plus';\r\n\r\nimport Header from \"../../../shared/Header\";\r\nimport GraphPower from \"./GraphPower\";\r\nimport ServicesPlus from \"../shared/ServicesContainer\";\r\nimport CreateDevice from \"./CreateDevice\"\r\n\r\nimport { Animation } from 'rsuite';\r\n\r\nimport moment from \"moment\";\r\n\r\nimport { useWindowSize } from '../../../shared/utilities/useWindowSize';\r\n\r\nimport { Link } from 'react-router-dom';\r\n\r\nimport empty_modules_plus from \"../../../../imgs/empty-data-device.svg\";\r\nimport empty_modules_plus_light from \"../../../../imgs/empty-data-device-light.svg\";\r\n\r\nconst DataAppliances = ({ value, property, unit, theme }) => {\r\n return (\r\n \r\n { tag ? \r\n
)}\r\n \r\n
: \r\n \r\n
\r\n \r\n
\r\n e.stopPropagation()}>\r\n \r\n
\r\n {props.language.tag_graph_power_legend_active_power}
\r\n e.stopPropagation()}>\r\n \r\n
\r\n {props.language.tag_graph_power_legend_reactive_power}
\r\n setGrabbing(true)} onMouseUp={() => setGrabbing(false)}>\r\n 3}\r\n allowDrag={false}\r\n allowDraw={false}\r\n allowResize={false}\r\n allowZoom={false}\r\n zoomDimension={\"x\"}\r\n zoomDomain={domain} \r\n onZoomDomainChange={(domainZoom) => {\r\n if(props.data?.length > 3){\r\n setDomain({...domain, x: domainZoom.x});\r\n }\r\n }} \r\n />\r\n } \r\n >\r\n \r\n item?.id_tag >= domain?.x[0] && item?.id_tag <= domain?.x[1])}\r\n barRatio={1} \r\n barWidth={70} \r\n cornerRadius={{ topRight: 8, topLeft: 8 }} \r\n labels={({ datum }) => `${datum?.active_power?.toFixed(2)} W`}\r\n labelComponent={ item?.id_tag >= domain?.x[0] && item?.id_tag <= domain?.x[1])}\r\n barRatio={1} \r\n barWidth={70} \r\n cornerRadius={{ topRight: 8, topLeft: 8 }} \r\n labels={({ datum }) => `${datum?.reactive_power?.toFixed(2)} VAr`}\r\n labelComponent={ \r\n item?.id_tag >= domain?.x[0] && item?.id_tag <= domain?.x[1]).map(item => item?.id_tag)} \r\n style={axisStyle(theme)} tickFormat={(x) => `Tag 00${x}`} tickCount={props.data.length}\r\n tickLabelComponent={\r\n
\r\n \r\n { theme === 'dark' ? \r\n 
:\r\n 
\r\n }\r\n
\r\n } \r\n {props.language.tag_graph_power_title_empty_data}
\r\n {props.language.tag_graph_power_phrase_empty_data}
\r\n \r\n
\r\n )\r\n}\r\n\r\n\r\nconst RenderCardEmpty = ({ language, theme }) => {\r\n return (\r\n {property}
\r\n \r\n
\r\n {value}
\r\n {unit}
\r\n \r\n { theme === 'dark' ? \r\n :\r\n \r\n }\r\n
\r\n )\r\n};\r\n\r\n\r\nconst Devices = (props) => {\r\n\r\n const [showInfoDevice, setShowInfoDevice] = useState(false);\r\n\r\n const [applianceSelected, setApplianceSelected] = useState(false);\r\n\r\n const isSelected = props.deviceSelected === props.item?.id_appliance;\r\n\r\n const theme = props.theme;\r\n\r\n useEffect(() => {\r\n if (applianceSelected) {\r\n props.onChange(props.item?.id_appliance);\r\n setApplianceSelected(false)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [applianceSelected]);\r\n\r\n return (\r\n \r\n {language.tag_new_tag_text_no_devices}\r\n
\r\n \r\n {language.tag_new_tag_text_no_devices_description}\r\n
\r\n setApplianceSelected(true)}>\r\n
\r\n \r\n {/*
\r\n setShowInfoDevice(!showInfoDevice)}>\r\n \r\n \r\n
*/}\r\n {props.item.custom_name}
\r\n \r\n {props.item.id_tag ?\r\n \r\n \r\n :\r\n
\r\n \r\n
\r\n }\r\n {props.language.tag_new_tag_text_no_tag}
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n {props.language.tag_manager_title_devices}
\r\n {/* \r\n setSearch(target.value)} />\r\n \r\n
*/}\r\n \r\n {props.appliances.filter(item => item?.custom_name?.toLowerCase()?.includes(search.toLowerCase()) || search === '').length ? props.appliances.filter(item => item?.custom_name?.toLowerCase()?.includes(search.toLowerCase()) || search === '').map((item, index) =>\r\n setDeviceSelected(value)} language={props.language} theme={theme}/>\r\n ) : }\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {props.tagRecords.length ?\r\n \r\n \r\n )\r\n }\r\n :\r\n \r\n \r\n }\r\n
\r\n \r\n
\r\n {props.tagRecords.map((rowData, index) =>\r\n \r\n {props.language.tag_manager_table_header_name}\r\n
\r\n \r\n {props.language.tag_manager_table_header_create_at}\r\n
\r\n \r\n {props.language.tag_manager_table_header_active_energy}\r\n
\r\n \r\n {props.language.tag_manager_table_header_active_power}\r\n
\r\n \r\n {props.language.tag_manager_table_header_reactive_energy}\r\n
\r\n \r\n {props.language.tag_manager_table_header_reactive_power}\r\n
\r\n \r\n
\r\n \r\n {`Tag 00${rowData?.id_tag}`}\r\n
\r\n \r\n {moment(rowData.create_timestamp).format('DD/MM/YYYY ')} {moment(rowData.create_timestamp).format('HH:mm:ss')}\r\n
\r\n \r\n {rowData.active_cons ? rowData.active_cons.toFixed(4) + \" Wh\" : rowData.processed ? props.language.tag_table_tag_label_processed : props.language.tag_table_tag_label_procesing}\r\n
\r\n \r\n {rowData.active_power ? rowData.active_power.toFixed(2) + \" W\" : rowData.processed ? props.language.tag_table_tag_label_processed : props.language.tag_table_tag_label_procesing}\r\n
\r\n \r\n {rowData.reactive_cons ? rowData.reactive_cons.toFixed(4) + \" VArh\" : rowData.processed ? props.language.tag_table_tag_label_processed : props.language.tag_table_tag_label_procesing}\r\n
\r\n \r\n {rowData.reactive_power ? rowData.reactive_power.toFixed(2) + \" VAr\" : rowData.processed ? props.language.tag_table_tag_label_processed : props.language.tag_table_tag_label_procesing}\r\n
\r\n \r\n
\r\n \r\n
\r\n {props.language.tag_manager_table_title_empty_data}
\r\n {props.language.tag_manager_table_phrase_empty_data}
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {props.totalReports.length && activeReports.length\r\n ? activeReports.slice(0, showActiveReports).map((item) =>{ \r\n\r\n const isSelected = item.id_report === selectedReport?.id_report;\r\n\r\n return(\r\n { \r\n onChange(item) \r\n }}\r\n >\r\n \r\n \r\n \r\n {item.file_name && item.file_name.split(\".\")[0]}\r\n
\r\n {\r\n e.stopPropagation(); \r\n if (newReport) {\r\n return\r\n } else if (!expanded) {\r\n setExpanded(true);\r\n setReportDetailed(item); \r\n } else if (\r\n expanded &&\r\n reportDetailed?.id_report !== item.id_report\r\n ) {\r\n setReportDetailed(item); \r\n } else if (\r\n expanded &&\r\n reportDetailed?.id_report === item.id_report\r\n ) {\r\n setExpanded(false);\r\n } \r\n }}\r\n > \r\n \r\n
\r\n \r\n )})\r\n : !newReport && (\r\n \r\n \r\n {language.genius_no_reports}\r\n \r\n
\r\n )}\r\n {props.newReport && (\r\n \r\n {data.length ? (\r\n \r\n
\r\n );\r\n })}\r\n \r\n ) : null}\r\n \r\n \r\n {\r\n if (isSelected) {\r\n onChange(\r\n selectedData.filter(\r\n (value) => value !== item[keyName],\r\n ),\r\n );\r\n } else {\r\n onChange([...selectedData, item[keyName]]);\r\n }\r\n }}\r\n >\r\n
\r\n \r\n {\r\n if (!activatedAllOptions || !selectedData.length) {\r\n onChange(\r\n mergeObjectsWithoutDuplicateIds(selectedData, data),\r\n );\r\n } else {\r\n onChange(\r\n selectedData.filter(\r\n (id) => !data.some((item) => item.id_graph === id),\r\n ),\r\n );\r\n }\r\n }}\r\n >\r\n {language.invoices_text_selec_all}\r\n \r\n
\r\n {data.map((item) => {\r\n let isSelected = selectedData.includes(item[keyName]);\r\n let isNew = false;\r\n\r\n if (newData.length)\r\n isNew = newData.findIndex((i) => i === item[keyName]) >= 0;\r\n\r\n return (\r\n \r\n \r\n {language\r\n ? language[item[labelName]]\r\n : item[labelName]}\r\n
\r\n {language[item.tooltip] !== \"\" ? (\r\n \r\n
\r\n ) : null}\r\n \r\n {language.genius_new_item}\r\n
\r\n\r\n \r\n setSearch(target.value)}\r\n />\r\n
\r\n \r\n )}\r\n \r\n \r\n {labelAllServices}\r\n \r\n {allowAllOptions && labelName !== \"file_name\" ? (\r\n {\r\n if (!selectedAllOptions) {\r\n onChange(totalOptions);\r\n } else {\r\n onChange([]);\r\n }\r\n }}\r\n >\r\n {language.reports_select_all}\r\n \r\n ) : null}\r\n {showSelected ? (\r\n {`${language.genius_selected_items} ${selectedData.length}/2`}\r\n ) : null}\r\n
\r\n {options?.length && groupsWithCount?.length && services.length ? (\r\n \r\n {options.map((item, i) => (\r\n
\r\n \r\n ))}\r\n \r\n ) : (\r\n data.length && (\r\n \r\n \r\n {item.name_category}\r\n
\r\n \r\n {item.options_graphs?.length &&\r\n item?.options_graphs.filter((g) =>\r\n selectedData.includes(g.id_graph),\r\n )?.length ? (\r\n \r\n {\r\n item?.options_graphs.filter((g) =>\r\n selectedData.includes(g.id_graph),\r\n )?.length\r\n }\r\n
\r\n ) : null}\r\n \r\n {data.map((item) => {\r\n let isSelected;\r\n let url;\r\n\r\n if (report) {\r\n isSelected =\r\n Array.isArray(selectedData) &&\r\n selectedData.findIndex(\r\n (i) => i.id_report === item.id_report,\r\n ) >= 0;\r\n url = `${process.env.REACT_APP_GENIUS_REPORTS_DISTRIBUTION}${item.id_account}/${item.file_name}`;\r\n } else {\r\n isSelected = Array.isArray(selectedData)\r\n ? selectedData.includes(item[keyName])\r\n : selectedData === item[keyName];\r\n }\r\n\r\n return (\r\n {\r\n if (isSelected) {\r\n if (report) {\r\n if (\r\n Array.isArray(selectedData) &&\r\n selectedData.length > 1\r\n )\r\n onChange(\r\n selectedData.filter(\r\n (i) => i.id_report !== item.id_report,\r\n ),\r\n );\r\n } else {\r\n onChange(\r\n Array.isArray(selectedData)\r\n ? typeReport\r\n ? [item[keyName]]\r\n : selectedData.filter(\r\n (value) => value !== item[keyName],\r\n )\r\n : item[keyName],\r\n );\r\n }\r\n } else {\r\n if (\r\n report &&\r\n Array.isArray(selectedData) &&\r\n selectedData.length < 2\r\n ) {\r\n onChange([\r\n ...selectedData,\r\n { url: url, ...item },\r\n ]);\r\n } else if (!report) {\r\n !typeReport &&\r\n props.serviceType &&\r\n props.serviceType.includes(4)\r\n ? onChange(item[keyName])\r\n : typeReport\r\n ? onChange([item[keyName]])\r\n : onChange([...selectedData, item[keyName]]);\r\n }\r\n }\r\n }}\r\n >\r\n
\r\n \r\n \r\n {report\r\n ? [item[labelName].split(\".\")[0]]\r\n : [item[labelName]]}\r\n
\r\n \r\n {report\r\n ? format(\r\n parseISO(item[labelDetail]),\r\n \"eee. dd, LLLL\",\r\n { locale: locale },\r\n )\r\n : item[labelDetail]}\r\n
\r\n\r\n {\r\n props.downloadReportsAsync({\r\n url: excelUrl,\r\n filename: fileName !== \"\" ? `${fileName}.xlsx` : \"\",\r\n });\r\n setFileName(\"\");\r\n setShow(false);\r\n props.setShowBlackScreen(false);\r\n }}\r\n className={`rounded-16 py-2 px-4 button-fill-brand button-content-equal ${theme}`}\r\n style={{ minWidth: 155 }}\r\n >\r\n
\r\n \r\n ) : null}\r\n \r\n \r\n \r\n
\r\n \r\n {props.language.genius_download_file_report}\r\n
\r\n\r\n
\r\n \r\n \r\n Nombre del documento\r\n \r\n setFileName(target.value)}\r\n placeholder=\"Nombre del documento\"\r\n type=\"text\"\r\n autoFocus={true}\r\n className={`input-export-report label-small-medium content-default-secondary ${theme}`}\r\n style={{ width: \"100%\" }}\r\n />\r\n
\r\n \r\n {\r\n props.downloadReportsAsync({\r\n url: htmlUrl,\r\n filename: fileName !== \"\" ? `${fileName}.html` : \"\",\r\n });\r\n setFileName(\"\");\r\n setShow(false);\r\n props.setShowBlackScreen(false);\r\n }}\r\n className={`me-${\r\n excelUrl !== \"\" ? 3 : 0\r\n } rounded-16 py-2 px-4 button-fill-brand button-content-equal ${theme}`}\r\n style={{ minWidth: 155 }}\r\n >\r\n
\r\n \r\n {excelUrl !== \"\" ? (\r\n \r\n \r\n \r\n {props.language.genius_download_html_report}\r\n
\r\n \r\n \r\n \r\n {props.language.genius_download_excel_report}\r\n
\r\n \r\n \r\n {props.language.genius_download_report}\r\n \r\n
\r\n \r\n ) : (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n);\r\n\r\nconst getMonthAndYearDetails = (isoDateString) => {\r\n const date = new Date(isoDateString);\r\n\r\n const startDate = startOfMonth(date);\r\n\r\n const endDate = endOfMonth(date);\r\n\r\n const month = getMonth(date) + 1;\r\n const year = getYear(date);\r\n\r\n return {\r\n startDate, // Objeto Date del primer día del mes\r\n endDate, // Objeto Date del último día del mes\r\n details: [month, year], // Arreglo con el mes y el año en texto\r\n };\r\n};\r\n\r\nconst isValidReport = (report, totalReports, type, self) => {\r\n if (type !== self) {\r\n if (report.name === null || report.name === \"\") {\r\n return false;\r\n }\r\n\r\n if (\r\n totalReports\r\n .map((r) => r?.file_name.split(\".\")[0].toLowerCase())\r\n .includes(report?.name.toLocaleLowerCase())\r\n ) {\r\n return false;\r\n }\r\n\r\n if (report.deviceIds === null || !report.deviceIds.length) {\r\n return false;\r\n }\r\n\r\n if (report.graphIds === null || !report.graphIds.length) {\r\n return false;\r\n }\r\n\r\n if (report.dateFrom === null || report.dateFrom === \"\") {\r\n return false;\r\n }\r\n\r\n if (report.dateTo === null || report.dateTo === \"\") {\r\n return false;\r\n }\r\n }\r\n\r\n return true;\r\n};\r\n\r\nconst showError = (report, totalReports, language, type) => {\r\n if (type !== language.ppa_report) {\r\n if (report.name === null || report.name === \"\" || report.duplicateReport) {\r\n return Alert.error(language.alert_genius_create_report_filename, 5000);\r\n }\r\n\r\n if (\r\n totalReports\r\n .map((r) => r?.file_name.split(\".\")[0].toLowerCase())\r\n .includes(report?.name.toLocaleLowerCase())\r\n ) {\r\n return Alert.error(\r\n language.alert_genius_create_report_duplicate_filename,\r\n 5000\r\n );\r\n }\r\n\r\n if (report.deviceIds === null || !report.deviceIds.length) {\r\n return Alert.error(language.alert_genius_create_report_devices, 5000);\r\n }\r\n\r\n if (report.graphIds === null || !report.graphIds.length) {\r\n return Alert.error(language.alert_genius_create_report_graphs, 5000);\r\n }\r\n\r\n if (\r\n report.dateFrom === null ||\r\n report.dateFrom === \"\" ||\r\n report.dateTo === null ||\r\n report.dateTo === \"\"\r\n ) {\r\n return Alert.error(language.alert_genius_create_report_range, 5000);\r\n }\r\n }\r\n};\r\n\r\nconst Genius = (props) => {\r\n const initReport = {\r\n name: \"\",\r\n graphIds: [],\r\n deviceIds: [],\r\n dateFrom: null,\r\n dateTo: null,\r\n duplicate: false,\r\n };\r\n\r\n /* Data of the new report that can be created by the user */\r\n const [report, setReport] = useState(initReport);\r\n const [isEnable, setEnable] = useState(false);\r\n /* Report that is expanded and is selected in \r\n \r\n \r\n \r\n {props.language.genius_title_main_reports}\r\n \r\n {props.totalReports.length ? (\r\n
\r\n ) : (\r\n \r\n setSelectedReport(value)}\r\n selectedReport={selectedReport}\r\n />\r\n {!expanded ? (\r\n {\r\n props.downloadReportsAsync(`${reportDetailed.id_account}/${reportDetailed.file_name}`)\r\n }}>\r\n
*/}\r\n \r\n setSelectedTypeOfReport(value)}\r\n outsideButtonEvent=\"GE Open Report Picker\"\r\n insideButtonEvent=\"GE Save Selection Reports\"\r\n buttonText={props.language.genius_save_report}\r\n typeReport={true}\r\n externalShowEvent={externalShowEvent}\r\n setExternalShowEvent={setExternalShowEvent}\r\n />\r\n \r\n props.setActiveReports(value)}\r\n outsideButtonEvent=\"GE Open Report Picker\"\r\n insideButtonEvent=\"GE Save Selection Reports\"\r\n />\r\n
\r\n ) : !newReport ? (\r\n \r\n \r\n props.deleteReportAsync(reportDetailed.id_report)\r\n }\r\n >\r\n
\r\n {/* \r\n \r\n {props.language.genius_delete_report}\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {props.language.genius_download_report}\r\n \r\n {\r\n if (isEnable) {\r\n if (report.dateFrom) {\r\n generateReportAsync(report);\r\n } else {\r\n generateReportAsync({\r\n dateFrom: dateRange[0].startDate,\r\n dateTo: dateRange[0].endDate,\r\n name: report.name,\r\n graphIds: report.graphIds,\r\n deviceIds: report.deviceIds,\r\n isPPA:\r\n selectedTypeOfReport[0] ===\r\n language.ppa_report,\r\n bodyPPA: {\r\n month: payloadPPA.month,\r\n year: payloadPPA.year,\r\n },\r\n });\r\n }\r\n\r\n props.setNewReport(false);\r\n props.setShowContentHeader(false);\r\n setReport(initReport);\r\n\r\n if (\r\n selectedTypeOfReport[0] !== language.ppa_report\r\n ) {\r\n track(\"Report created\", {\r\n Genius_Variable_ID: graphSelected.map(\r\n function (graph) {\r\n return graph?.description;\r\n }\r\n ),\r\n });\r\n } else {\r\n setSelectedTypeOfReport([]);\r\n props.setNewReport(false);\r\n props.setShowContentHeader(false);\r\n setReport(initReport);\r\n props.setGraphs([]);\r\n }\r\n } else {\r\n showError(\r\n report,\r\n totalReports,\r\n props.language,\r\n selectedTypeOfReport[0]\r\n );\r\n }\r\n }}\r\n >\r\n \r\n {props.language.genius_save_report}\r\n \r\n \r\n {\r\n setSelectedTypeOfReport([]);\r\n props.setNewReport(false);\r\n props.setShowContentHeader(false);\r\n setReport(initReport);\r\n props.setGraphs([]);\r\n }}\r\n >\r\n \r\n {props.language.genius_cancel_report}\r\n \r\n \r\n
\r\n )}\r\n \r\n ) : (\r\n \r\n setSelectedTypeOfReport(value)}\r\n outsideButtonEvent=\"GE Open Report Picker\"\r\n insideButtonEvent=\"GE Save Selection Reports\"\r\n typeReport={true}\r\n externalShowEvent={externalShowEvent}\r\n setExternalShowEvent={setExternalShowEvent}\r\n />\r\n ) : (\r\n
\r\n )}\r\n \r\n {\r\n if (isEnable) {\r\n generateReportAsync(report);\r\n props.setNewReport(false);\r\n props.setShowContentHeader(false);\r\n setReport(initReport);\r\n track(\"Report created\", {\r\n Genius_Variable_ID: graphSelected.map(function (\r\n graph\r\n ) {\r\n return graph?.description;\r\n }),\r\n });\r\n } else {\r\n showError(\r\n report,\r\n totalReports,\r\n props.language,\r\n selectedTypeOfReport[0]\r\n );\r\n }\r\n }}\r\n >\r\n \r\n {\r\n props.setNewReport(false);\r\n props.setShowContentHeader(false);\r\n setSelectedTypeOfReport([]);\r\n setReport(initReport);\r\n props.setGraphs([]);\r\n }}\r\n >\r\n \r\n
\r\n )}\r\n \r\n {props.language.genius_save_report}\r\n
\r\n \r\n\r\n {props.language.genius_cancel_report}\r\n
\r\n \r\n\r\n \r\n {selectedTypeOfReport[0] !== language.ppa_report && (\r\n <>\r\n {\r\n setReport({ ...report, name: target.value });\r\n }}\r\n >\r\n )}\r\n
\r\n \r\n \r\n {props.language.genius_name_report}\r\n \r\n {!newReport ? (\r\n \r\n \r\n {reportDetailed?.file_name &&\r\n reportDetailed.file_name.split(\".\")[0]}\r\n \r\n
\r\n ) : (\r\n \r\n \r\n {props.language.genius_date_range_report}\r\n \r\n\r\n {\r\n if (newReport) {\r\n setShowCalendar(!showCalendar);\r\n }\r\n }}\r\n >\r\n \r\n {newReport\r\n ? format(\r\n dateRange[0].startDate,\r\n \"eee. dd, LLLL\",\r\n { locale: locale }\r\n )\r\n : reportDetailed?.start_date\r\n ? /* add 1 day because ISO date is displayed as the previous day */ format(\r\n add(parseISO(reportDetailed.start_date), {\r\n days: 1,\r\n }),\r\n \"eee. dd, LLLL\",\r\n { locale: locale }\r\n )\r\n : null}\r\n \r\n
\r\n {newReport && (\r\n \r\n
\r\n \r\n \r\n {props.language.genius_creation_date_report}\r\n \r\n \r\n \r\n {newReport\r\n ? format(new Date(), \"eee. dd, LLLL\", {\r\n locale: locale,\r\n })\r\n : reportDetailed?.created_time\r\n ? format(\r\n parseISO(reportDetailed.created_time),\r\n \"eee. dd, LLLL\",\r\n { locale: locale }\r\n )\r\n : null}\r\n \r\n
\r\n \r\n \r\n )}\r\n {selectedTypeOfReport[0] === language.ppa_report && (\r\n \r\n \r\n {props.language.genius_date_range_report}\r\n \r\n {newReport && (\r\n setShowCalendar(!showCalendar)}\r\n >\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n {!newReport ? (\r\n \r\n {service.name}\r\n
\r\n }\r\n />\r\n ))}\r\n {reportDetailed?.id_services.length > 2 && (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {props.language.genius_services_report}\r\n
\r\n\r\n {reportDetailed?.id_services &&\r\n `${reportDetailed.id_services.length} ${props.language.genius_selected_items}`}\r\n
\r\n\r\n {reportDetailed?.id_services\r\n .slice(0, 2)\r\n .map((service, i) => (\r\n \r\n \r\n {service.name}\r\n \r\n
\r\n }\r\n text={\r\n \r\n {reportDetailed.id_services\r\n .slice(2)\r\n .map((service) => (\r\n \r\n \r\n {service.name}\r\n \r\n
\r\n ))}\r\n \r\n \r\n }\r\n button={\r\n \r\n +{reportDetailed.id_services.length - 2}\r\n
\r\n \r\n \r\n }\r\n />\r\n )}\r\n \r\n \r\n ) : (\r\n\r\n \r\n
\r\n \r\n }\r\n button={\r\n \r\n \r\n {props.language.genius_services_report}\r\n \r\n
\r\n \r\n \r\n {service.name}\r\n
\r\n }\r\n />\r\n ))}\r\n \r\n {\r\n setReport({\r\n ...report,\r\n deviceIds: value.map((v) => v.idService),\r\n });\r\n }}\r\n availableTypeServices={\r\n serviceType.includes(4)\r\n ? [\"generation\"]\r\n : [\"energy\", \"plus\"]\r\n }\r\n limitSelectServices={\r\n serviceType.includes(4) ? 1 : null\r\n }\r\n typeComponent={\"energy\"}\r\n popoverPosition={\"bottomLeft\"}\r\n />\r\n
\r\n {!report.deviceIds && !serviceSelected.length ? (\r\n \r\n
\r\n ) : serviceSelected.length > 2 ? (\r\n \r\n + {props.language.genius_add_services}\r\n
\r\n\r\n {serviceSelected\r\n .slice(0, 2)\r\n .map((service, i) => (\r\n \r\n \r\n {service.name}\r\n \r\n
\r\n }\r\n text={\r\n \r\n {serviceSelected\r\n .slice(2)\r\n .map((s, i) => (\r\n \r\n {s.name}\r\n
\r\n ))}\r\n \r\n {service.name}\r\n
\r\n \r\n }\r\n text={\r\n\r\n
\r\n \r\n \r\n {props.language.genius_graphs}\r\n \r\n \r\n
\r\n \r\n {reportDetailed?.id_graphs &&\r\n `${reportDetailed.id_graphs.length} ${props.language.genius_selected_items}`}{\" \"}\r\n
\r\n\r\n {reportDetailed?.id_graphs\r\n .slice(0, 2)\r\n .map((_graph) => (\r\n \r\n \r\n \r\n {props.language[_graph.description]}\r\n \r\n
\r\n }\r\n theme={theme}\r\n text={\r\n \r\n {reportDetailed.id_graphs\r\n .slice(2)\r\n .map((_graph) => (\r\n \r\n \r\n {\r\n props.language[\r\n _graph.description\r\n ]\r\n }\r\n \r\n
\r\n ))}\r\n \r\n \r\n }\r\n button={\r\n \r\n \r\n {\r\n props.language[\r\n _graph.description\r\n ]\r\n }\r\n \r\n }\r\n />\r\n
\r\n );\r\n })}\r\n \r\n \r\n {props.language.genius_graphs}\r\n \r\n
\r\n \r\n y.new_graph === 1)\r\n .map((g) => g.id_graph)}\r\n options={graphs ?? []}\r\n selectedData={report.graphIds}\r\n groups={\r\n !premium\r\n ? dataGroupGraphs.filter(\r\n (item) => item.id !== 2\r\n )\r\n : dataGroupGraphs\r\n }\r\n onChange={(value) => {\r\n setReport({ ...report, graphIds: value });\r\n }}\r\n outsideButtonEvent=\"GE Open Graphs Selection\"\r\n insideButtonEvent=\"GE Save Selection Graphs\"\r\n allOptionButtonEvent=\"GE Select All Graphs\"\r\n services={report.deviceIds}\r\n disabled={graphs.length === 0}\r\n />\r\n {!report.graphIds.length ? (\r\n \r\n \r\n + {props.language.genius_add_graphs}\r\n \r\n
\r\n ) : graphSelected.length > 2 ? (\r\n \r\n {graphSelected.slice(0, 2).map((_graph) => {\r\n return (\r\n \r\n \r\n \r\n {\r\n props.language[\r\n _graph.description\r\n ]\r\n }\r\n \r\n
\r\n }\r\n text={\r\n \r\n {graphSelected\r\n .slice(2)\r\n .map((_graph) => (\r\n \r\n \r\n {\r\n props.language[\r\n _graph.description\r\n ]\r\n }\r\n \r\n
\r\n ))}\r\n \r\n \r\n }\r\n button={\r\n \r\n
\r\n }\r\n />\r\n \r\n ) : (\r\n graphSelected.map((_graph) => {\r\n return (\r\n {`+${\r\n report.graphIds.length - 2\r\n }`}
\r\n\r\n
\r\n ) : (\r\n \r\n
\r\n \r\n \r\n {props.language.genius_button_default_report}\r\n
\r\n \r\n \r\n \r\n )}\r\n \r\n \r\n ) : (\r\n \r\n
\r\n )}\r\n \r\n \r\n {loadingContent}\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n intervalGraph: state.plus.intervalGraphAlwaysOn,\r\n language: state.shared.language\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n setIntervalGraph: (payload) => dispatch(plusActions.setIntervalGraphAlwaysOn(payload))\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(GraphPeriodPicker);","import React from 'react'\r\n\r\nimport { Calendar as Datepicker } from 'react-calendar';\r\nimport { Transition } from 'react-transition-group';\r\nimport { calendarIntervals, setCalendarDates } from '../../../services/CalendarHandler';\r\n\r\nconst Calendar = (props) => {\r\n\r\n let show = props.show;\r\n let interval = props.interval;\r\n let start = props.start;\r\n let end = props.end;\r\n let setDates = props.setDates;\r\n\r\n return (\r\n { changePeriod(1) }}>\r\n
\r\n {props.language.energy_graph_period_picker_week}
\r\n { changePeriod(2) }}>\r\n
\r\n {props.language.energy_graph_period_picker_month}
\r\n { changePeriod(3) }}>\r\n
\r\n \r\n {props.language.energy_graph_period_picker_year}
\r\n \r\n \r\n }\r\n prevLabel={}\r\n onChange={(value) => setDates(setCalendarDates(value, interval)) } />\r\n
)}\r\n \r\n )\r\n}\r\n\r\n\r\nexport default Calendar","import React, { useEffect, useState, useRef, Fragment } from \"react\";\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as sharedActions from '../../../../../store/actions/Shared';\r\nimport * as plusActions from '../../../../../store/actions/Plus';\r\n\r\nimport { VictoryChart, VictoryLabel, VictoryAxis, VictoryBar, VictoryZoomContainer, Rect } from \"victory\";\r\nimport { grid, tickLabelsX, tickLabelsY, tickStyle } from \"../../../../shared/svgs/GraphStyles\";\r\n\r\nimport _ from 'lodash';\r\nimport moment from 'moment-timezone';\r\n\r\nimport GraphPeriodPicker from \"./GraphPeriodPicker\";\r\nimport Calendar from \"../../../../shared/utilities/Calendar\";\r\nimport { useWindowSize } from '../../../../shared/utilities/useWindowSize';\r\nimport empty_graph_energy from \"../../../../../imgs/empty-graph-energy.svg\";\r\n\r\nimport { Transition } from 'react-transition-group';\r\n\r\nimport { Loader } from 'rsuite';\r\nimport ButtonCircle from \"../../../../shared/utilities/ButtonCircle\";\r\n\r\nimport { track } from \"@amplitude/analytics-browser\";\r\n\r\nimport Draggable from \"react-draggable\";\r\n\r\nconst formatDateLabel = (intervalGraph, domain, lang) => {\r\n\r\n\tlet dateFormated;\r\n\tlet intervalLeft;\r\n\tlet intervalRight;\r\n\r\n\tmoment.locale(lang);\r\n\r\n\tswitch (intervalGraph) {\r\n\t\tcase 0:\r\n\t\t\tdateFormated = moment.utc(domain?.x[1] * 1000).format(\"DD MMMM YYYY\");\r\n\t\t\tbreak;\r\n\t\tcase 1:\r\n\t\tcase 2:\r\n\t\t\tintervalLeft = moment.utc((domain?.x[0] + 86400) * 1000).format(\"MMM DD\");\r\n\t\t\tintervalRight = moment.utc(domain?.x[1] * 1000).format(\"MMM DD\");\r\n\t\t\tdateFormated = `${intervalLeft} ${lang === 'es' ? 'a' : '-'} ${intervalRight}`;\r\n\t\t\tbreak;\r\n\t\tcase 3:\r\n\t\t\tintervalLeft = moment.utc((domain?.x[0] + 2592000) * 1000).format(\"MMM YYYY\");\r\n\t\t\tintervalRight = moment.utc(domain?.x[1] * 1000).format(\"MMM YYYY\");\r\n\t\t\tdateFormated = `${intervalLeft} ${lang === 'es' ? 'a' : '-'} ${intervalRight}`;\r\n\t\t\tbreak;\r\n\t\tdefault:\r\n\t\t\tdateFormated = \"\";\r\n\t\t\tbreak;\r\n\t}\r\n\r\n\treturn dateFormated;\r\n\r\n}\r\n\r\nconst capitalizedText = (text) => {\r\n\r\n\tlet label = \"\";\r\n\tvar phrase = text.toLowerCase().split(' ');\r\n\r\n\tfor (var i = 0; i < phrase.length; i++) {\r\n\t\tif (i !== 2) {\r\n\t\t\tphrase[i] = phrase[i].charAt(0).toUpperCase() + phrase[i].substring(1);\r\n\t\t}\r\n\t};\r\n\r\n\tlabel = phrase.join(' ');\r\n\r\n\treturn label;\r\n};\r\n\r\nconst handlerFormatAxis = (date, type, lang, title = false) => {\r\n\r\n\tlet stringFormats;\r\n\r\n\tswitch (type) {\r\n\t\tcase 0:\r\n\t\t\tstringFormats = ['hh:mm DD/MM/YY', 'HH', 'dddd, DD MMMM YYYY']\r\n\t\t\tbreak;\r\n\t\tcase 1:\r\n\t\tcase 2:\r\n\t\t\tstringFormats = ['DD/MM/YY', 'ddd, DD', 'MMMM YYYY']\r\n\t\t\tbreak;\r\n\t\tcase 3:\r\n\t\t\tstringFormats = ['MMM, YY', 'MMM', 'YYYY']\r\n\t\t\tbreak;\r\n\t\tdefault:\r\n\t\t\tbreak;\r\n\t}\r\n\r\n\tmoment.locale(lang);\r\n\treturn moment.utc(date * 1000).format(stringFormats[title ? 2 : 1])\r\n\r\n\r\n};\r\n\r\nconst Graph = (props) => {\r\n\r\n\tconst [graphContainerWidth, setGraphContainerWidth] = useState(0);\r\n\tconst [domain, setDomain] = useState(null);\r\n\tconst [entireDomain, setEntireDomain] = useState(null);\r\n\tconst [grabbing, setGrabbing] = useState(false);\r\n\tconst [emptyData, setEmptyData] = useState(false);\r\n\r\n\tconst graphContainer = useRef(null);\r\n\r\n\tlet showCalendar = props.showCalendar;\r\n\tlet dataGraph = props.dataGraph;\r\n\tlet intervalGraph = props.intervalGraph;\r\n\tlet graphDateFrom = props.graphDateFrom;\r\n\tlet graphDateTo = props.graphDateTo;\r\n\tlet activeServicesPlus = props.activeServicesPlus;\r\n\r\n\tconst size = useWindowSize();\r\n\r\n\tconst setShowBlackScreen = props.setShowBlackScreen;\r\n\tconst setShowCalendar = props.setShowCalendar;\r\n\r\n\r\n\tuseEffect(() => { setShowBlackScreen(showCalendar) }, [setShowBlackScreen, showCalendar]);\r\n\r\n\tuseEffect(() => setGraphContainerWidth(graphContainer?.current?.getBoundingClientRect().width), [size, props.graphLoading]);\r\n\r\n\tuseEffect(() => setDomain(null), [intervalGraph, graphDateFrom, graphDateTo, activeServicesPlus]);\r\n\r\n\tuseEffect(() => {\r\n\t\tconst emptyDataGraph = dataGraph.filter(d => d?.value === 0);\r\n\t\tsetEmptyData(emptyDataGraph.length === dataGraph.length);\r\n\t\t// eslint-disable-next-line\r\n\t}, [dataGraph]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (dataGraph.length) {\r\n\t\t\tconst intervalX = [dataGraph[0]?.date_unix, _.last(dataGraph)?.date_unix];\r\n\t\t\tsetEntireDomain({ x: intervalX });\r\n\t\t\tif (!domain) {\r\n\t\t\t\tsetDomain({ x: [intervalX[1] - (intervalGraph === 1 ? (604800) : intervalGraph === 0 ? 86400 : intervalGraph === 2 ? (86400 * 30) : 31536000), intervalX[1]] });\r\n\t\t\t}\r\n\t\t}\r\n\t\t// eslint-disable-next-line\r\n\t}, [dataGraph]);\r\n\r\n\tuseEffect(() => {\r\n\t\tif (domain) {\r\n\t\t\tconst intervalLeft = (domain.x[0] - entireDomain.x[0]) / (intervalGraph === 1 ? 604800 : intervalGraph === 0 ? 86400 : intervalGraph === 2 ? 86400 * 30 : 31536000);\r\n\t\t\tconst intervalRight = (entireDomain.x[1] - domain.x[1]) / (intervalGraph === 1 ? 604800 : intervalGraph === 0 ? 86400 : intervalGraph === 2 ? 86400 * 30 : 31536000);\r\n\t\t\tif (intervalLeft < 0.6 && props.enableScrollData) {\r\n\t\t\t\tprops.loadGraphAlwaysOnAsync(true, true);\r\n\t\t\t}\r\n\t\t\tif (intervalRight < 0.6 && props.enableScrollData && entireDomain.x[1] - moment().unix() <= 0) {\r\n\t\t\t\tprops.loadGraphAlwaysOnAsync(true, false);\r\n\t\t\t}\r\n\t\t}\r\n\t\t// eslint-disable-next-line\r\n\t}, [domain, props.enableScrollData]);\r\n\r\n\tconst getMax = (arr) => {\r\n\t\tarr = arr.filter(value => value?.value > 0 && value?.date_unix >= domain?.x[0] && value?.date_unix <= domain?.x[1])\r\n\t\t\t.map(value => value?.value)\r\n\t\t\t.reduce((a, b) => a.concat(b), []);\r\n\t\treturn _.mean(arr);\r\n\t}\r\n\r\n\tconst handleCalendar = (value) => {\r\n\t\tprops.setGraphDates(value);\r\n\t\tprops.loadGraphAlwaysOnAsync(false, true);\r\n\t\tsetShowBlackScreen(false);\r\n\t\tsetShowCalendar(false);\r\n\t}\r\n\r\n\tconst graphLoadingContainer = (loading, language) => \r\n\t\t\r\n\t\t\t{state => (\r\n\t\t\t\t
;\r\n\r\n\tconst RenderEmptyData = () => {\r\n\t\treturn (\r\n\t\t\t\r\n\t\t\t\t\t
\r\n\t\t\t)}\r\n\t\t\r\n\t\r\n\t\t\t\t\t\t
\r\n\t\t\t\t\r\n\t\t\t\t
\r\n\t\t\t\t
\r\n\t\t);\r\n\t};\r\n\r\n\tconst eventHandler = () => {\r\n\t\ttrack('Standby graphic scrolled', {Rank_ID: props.rankGraphIdAlwaysOn})\t\r\n\t}\r\n\r\n\treturn (\r\n\t\t{props.language.energy_graph_title_empty_data}
\r\n\t\t\t\t{props.language.energy_graph_description_empty_data}
\r\n\t\t\t\r\n\t\t\t
\r\n\t)\r\n\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n\tshowCalendar: state.shared.showCalendar,\r\n\tlanguage: state.shared.language,\r\n\tdataGraph: state.plus.dataGraphAlwaysOn,\r\n\tintervalGraph: state.plus.intervalGraphAlwaysOn,\r\n\tenableScrollData: state.plus.enableScrollDataAlwaysOn,\r\n\tgraphDateFrom: state.plus.graphDateFromAlwaysOn,\r\n\tgraphDateTo: state.plus.graphDateToAlwaysOn,\r\n\tactiveServicesPlus: state.services.activeServicesPlus,\r\n\tgraphLoading: state.plus.loadingAlwaysOnModule,\r\n\trankGraphIdAlwaysOn: state.plus.rankGraphIdAlwaysOn\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n\tsetShowBlackScreen: (payload) => dispatch(sharedActions.setShowBlackScreen(payload)),\r\n\tsetShowCalendar: (payload) => dispatch(sharedActions.setShowCalendar(payload)),\r\n\tloadGraphAlwaysOnAsync: (payload, type) => dispatch(plusActions.loadGraphAlwaysOnAsync(payload, type)),\r\n\tsetGraphDates: (payload) => dispatch(plusActions.setGraphDatesAlwaysOn(payload)),\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Graph);","import React, { useEffect, useRef } from \"react\";\r\n\r\nimport { connect } from \"react-redux\";\r\n\r\nimport * as plusActions from '../../../../store/actions/Plus';\r\n\r\nimport ContentLoader from \"react-content-loader\";\r\n\r\nimport { track } from \"@amplitude/analytics-browser\";\r\n\r\nconst indicatorsLoading = \r\n\t\t\t\t{props.graphLoading ? \r\n\t\t\t\t\t\t }\r\n\t\t\t
\r\n\t\t{graphLoadingContainer(props.graphLoading, props.language)}
:\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t { setShowCalendar(!showCalendar) }}\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t
\r\n\t\t\t\t\t\t\t\t{capitalizedText(formatDateLabel(intervalGraph, domain, props.language.language_locale))}
\r\n\t\t\t\t\t\t\t setGrabbing(true)} onMouseUp={() => setGrabbing(false)}>\r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t{emptyData === false && dataGraph.length ?\r\n\t\t\t\t\t\t\t\t\t \r\n\t\t\t\t\t\t
\r\n\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t {\t\t\t\t\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetDomain({ x: domainZoom.x });\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t}} />\r\n\t\t\t\t\t\t\t\t\t\t\t}>\r\n\t\t\t\t\t\t\t\t\t\t\t item?.date_unix >= domain?.x[0] && item?.date_unix <= domain?.x[1])}\r\n\t\t\t\t\t\t\t\t\t\t\t\tbarRatio={10}\r\n\t\t\t\t\t\t\t\t\t\t\t\tbarWidth={intervalGraph === 1 ? 60 : intervalGraph === 3 ? 40 : 20}\r\n\t\t\t\t\t\t\t\t\t\t\t\tlabels={({ datum }) => datum?.value === 0 ? '' : datum?.value > 1000 ? `${((datum?.value) / 1000)?.toFixed(2)} kWh` : `${datum?.value} Wh`}\r\n\t\t\t\t\t\t\t\t\t\t\t\tlabelComponent={ (datum?.value >= getMax(dataGraph) ? \"#161617\" : \"#FFF\"), fontSize: 10, fontFamily: \"Inter\", fontWeight: 600 }} angle={270} />}\r\n\t\t\t\t\t\t\t\t\t\t\t\tcornerRadius={{ topLeft: 4, topRight: 4 }}\r\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ data: { fill: ({ datum }) => (datum?.value >= getMax(dataGraph) ? \"url(#linearRedOrangeGradient)\" : \"#323234\") } }}\r\n\t\t\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t\t\t\t Math.round(x * 100) / 100}\r\n\t\t\t\t\t\t\t\t\t\t\t\ttickLabelComponent={}> }\r\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ axis: { stroke: \"transparent\" }, grid: grid, tickLabels: tickLabelsY }} />\r\n\t\t\t\t\t\t\t\t\t\t\t item?.date_unix >= domain?.x[0] && item?.date_unix <= domain?.x[1]).map(item => item?.date_unix)} tickFormat={(x) => `${handlerFormatAxis(x, intervalGraph, props.language.language_locale)}`} style={{ tickLabels: tickLabelsX }} />\r\n\t\t\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t\t
: \r\n \r\n
;\r\n\r\nconst RenderWidgets = ({ item, language }) => {\r\n\r\n const hasHovered = useRef(false);\r\n\r\n const handleHover = () => {\r\n if (!hasHovered.current) {\r\n hasHovered.current = true;\r\n track('Standby widget hover', { Standby_Widget_ID: item?.title }); \r\n }\r\n };\r\n\r\n const handleLeave = () => {\r\n hasHovered.current = false;\r\n };\r\n\r\n return (\r\n {language[item.title]}
\r\n{item.value}
\r\n\r\n {item.kpi && }\r\n
\r\n );\r\n};\r\n\r\nconst Cards = (props) => {\r\n\r\n let activeServicesPlus = props.activeServicesPlus;\r\n let loadAlwaysOnIndicators = props.loadAlwaysOnIndicators;\r\n let alwaysOnIndicators = props.alwaysOnIndicators;\r\n\r\n useEffect(() => {\r\n const request = async () => await loadAlwaysOnIndicators();\r\n if (activeServicesPlus.length) request()\r\n }, [activeServicesPlus, loadAlwaysOnIndicators]);\r\n\r\n return (\r\n {item?.text_value}{language[item?.text]}
\r\n\r\n {props.loadingAlwaysOnIndicators ?\r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n alwaysOnIndicators: state.plus.alwaysOnIndicators,\r\n loadingAlwaysOnIndicators: state.plus.loadingAlwaysOnIndicators,\r\n devices: state.plus.devices,\r\n activeServicesPlus: state.services.activeServicesPlus,\r\n language: state.shared.language\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n loadAlwaysOnIndicators: () => dispatch(plusActions.loadAlwaysOnIndicators()),\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Cards)\r\n\r\n","import React, { useEffect } from \"react\";\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as servicesActions from '../../../../store/actions/Services';\r\nimport * as plusActions from '../../../../store/actions/Plus';\r\n\r\nimport Header from \"../../../shared/Header\";\r\nimport Graph from \"./graph/Graph\";\r\nimport Cards from \"./Cards\";\r\nimport ServicesPlus from \"../shared/ServicesContainer\";\r\n\r\nconst AlwaysOn = (props) => {\r\n\r\n let account = props.account;\r\n const loadServicesAsync = props.loadServicesAsync;\r\n let intervalGraphAlwaysOn = props.intervalGraphAlwaysOn;\r\n let activeServicesPlus = props.activeServicesPlus;\r\n const loadGraphAlwaysOnAsync = props.loadGraphAlwaysOnAsync;\r\n\r\n useEffect(() => {\r\n if (!props.activeServicesPlus?.length) {\r\n account && loadServicesAsync();\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [account]);\r\n\r\n useEffect(() => {\r\n if (activeServicesPlus.length) {\r\n loadGraphAlwaysOnAsync();\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [activeServicesPlus, intervalGraphAlwaysOn]);\r\n\r\n return (\r\n \r\n {indicatorsLoading}\r\n
:\r\n alwaysOnIndicators.length &&\r\n alwaysOnIndicators.map((d, index) => (\r\n \r\n
\r\n ))\r\n }\r\n \r\n
\r\n \r\n {[0, 1, 2].map((_item, index) => ())}\r\n
\r\n );\r\n};\r\n\r\n\r\nconst getInitPage = (timezone) => {\r\n const initPageByTime = new Date().toLocaleString(\"en-US\", { timeZone: timezone });\r\n return new Date(initPageByTime).getHours();\r\n}\r\n\r\n\r\nconst areaStyle = (variable, theme, line = false) => {\r\n switch (variable) {\r\n case 'active_power_':\r\n return (\r\n [\r\n {\r\n data: {\r\n fill: line ? \"none\" : `url(#linearBlueLightTransparent25${theme !== 'dark' ? 'Light' : ''})`,\r\n stroke: \"var(--blue-500)\",\r\n strokeWidth: 2\r\n }\r\n },\r\n {\r\n data: {\r\n fill: line ? \"none\" : `url(#linearBlueTransparent25${theme !== 'dark' ? 'Light' : ''})`,\r\n stroke: \"var(--blue-600)\",\r\n strokeWidth: 2,\r\n fillOpacity: 0.6\r\n }\r\n },\r\n {\r\n data: {\r\n fill: line ? \"none\" : `url(#linearBlueDarkTransparent25${theme !== 'dark' ? 'Light' : ''})`,\r\n stroke: \"var(--blue-700)\",\r\n strokeWidth: 2,\r\n fillOpacity: 0.6\r\n }\r\n }\r\n ]);\r\n case 'rms_voltage_':\r\n return (\r\n [\r\n {\r\n data: {\r\n fill: line ? \"none\" : `url(#linearGreenTransparent25${theme !== 'dark' ? 'Light' : ''})`,\r\n stroke: \"var(--brand-primary-500)\",\r\n strokeWidth: 2,\r\n }\r\n },\r\n {\r\n data: {\r\n fill: line ? \"none\" : `url(#linearGreenLightTransparent25${theme !== 'dark' ? 'Light' : ''})`,\r\n stroke: \"var(--brand-primary-600)\",\r\n strokeWidth: 2,\r\n fillOpacity: 0.6\r\n }\r\n },\r\n {\r\n data: {\r\n fill: line ? \"none\" : `url(#linearGreenDarkTransparent25${theme !== 'dark' ? 'Light' : ''})`,\r\n stroke: \"var(--brand-primary-700)\",\r\n strokeWidth: 2,\r\n fillOpacity: 0.6\r\n }\r\n },\r\n ]);\r\n case 'rms_current_':\r\n return (\r\n [\r\n {\r\n data: {\r\n fill: line ? \"none\" : `url(#linearPurpleLightTransparent25${theme !== 'dark' ? 'Light' : ''})`,\r\n stroke: \"var(--purple-500)\",\r\n strokeWidth: 2,\r\n }\r\n },\r\n {\r\n data: {\r\n fill: line ? \"none\" : `url(#linearPurpleTransparent25${theme !== 'dark' ? 'Light' : ''})`,\r\n stroke: \"var(--purple-600)\",\r\n strokeWidth: 2,\r\n fillOpacity: 0.6\r\n }\r\n },\r\n {\r\n data: {\r\n fill: line ? \"none\" : `url(#linearPurpleDarkTransparent25${theme !== 'dark' ? 'Light' : ''})`,\r\n stroke: \"var(--purple-700)\",\r\n strokeWidth: 2,\r\n fillOpacity: 0.6\r\n }\r\n },\r\n ]);\r\n default:\r\n return []\r\n\r\n }\r\n}\r\n\r\nconst variableName = graph => {\r\n switch (graph) {\r\n case 'active_power_':\r\n return \"Potencia (Watts)\";\r\n case 'rms_voltage_':\r\n return \"Voltaje (Volts)\";\r\n case 'rms_current_':\r\n return \"Corriente (Amps)\";\r\n default:\r\n return \"\";\r\n }\r\n}\r\n\r\nconst LoadingHistoryData = () =>\r\n \r\n
;\r\n\r\nconst graphLoadingContainer = (loading, language, theme) => \r\n \r\n {state => (\r\n
;\r\n\r\nconst VictoryZoomContainer = createContainer('zoom', 'voronoi');\r\n\r\nconst Graphs = (props) => {\r\n\r\n const { theme } = props;\r\n\r\n const graphContainer = useRef(null);\r\n\r\n const size = useWindowSize();\r\n\r\n const [graphContainerWidth, setGraphContainerWidth] = useState(0);\r\n const [graph_1, setGraph_1] = useState('active_power_');\r\n const [graph_2, setGraph_2] = useState('rms_voltage_');\r\n const [graph_3, setGraph_3] = useState('rms_current_');\r\n\r\n const [firstLine, setFirstLine] = useState(1);\r\n const [secondLine, setSecondLine] = useState(2);\r\n const [thirdLine, setThirdLine] = useState(3);\r\n\r\n const [typeLines, setTypeLines] = useState(false);\r\n\r\n const [day, setDay] = useState(0);\r\n\r\n const [data, setData] = useState([]);\r\n\r\n const [domain, setDomain] = useState(null);\r\n const [entireDomain, setEntireDomain] = useState(null);\r\n const [showStreaming, setShowStreaming] = useState(true);\r\n const [zoomMinutes, setZoomMinutes] = useState(3);\r\n const [grabbing, setGrabbing] = useState(false);\r\n const [pointTooltip, setPointTooltip] = useState(null);\r\n const [showTooltip, setShowTooltip] = useState(false);\r\n const [enableLoaderGraph, setEnableLoaderGraph] = useState(false);\r\n const [indexVariable, setIndexVariable] = useState(0);\r\n const [expandedVariable, setExpandedVariable] = useState(false);\r\n const [expandedLine, setExpandedLine] = useState(false);\r\n\r\n let dataGraph = props.dataGraph;\r\n let deviceActive = props.devices.filter(value => value?.id_service === props.activeServicesPlus[0]?.idService)[0];\r\n\r\n useEffect(() => {\r\n if (expandedVariable) {\r\n if (graph_1 === 'active_power_') track('Quality variable clicked', { Quality_Variable_ID: 'active_power' });\r\n if (graph_1 === 'rms_voltage_') track('Quality variable clicked', { Quality_Variable_ID: 'rms_voltage' });\r\n if (graph_1 === 'rms_current_') track('Quality variable clicked', { Quality_Variable_ID: 'rms_current' });\r\n setExpandedVariable(false);\r\n }\r\n }, [graph_1, expandedVariable])\r\n\r\n useEffect(() => {\r\n if (expandedLine) {\r\n if (firstLine === 1) track('Quality variable clicked', { Quality_Variable_ID: 'line_1' });\r\n if (firstLine === 2) track('Quality variable clicked', { Quality_Variable_ID: 'line_2' });\r\n if (firstLine === 3) track('Quality variable clicked', { Quality_Variable_ID: 'line_3' });\r\n setExpandedLine(false);\r\n }\r\n }, [firstLine, expandedLine])\r\n\r\n useEffect(() => { setGraphContainerWidth(graphContainer.current.getBoundingClientRect().width) }, [size]);\r\n\r\n useEffect(() => {\r\n if (!props.devices.length) {\r\n props.loadDevices()\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (props.devices.length && props.activeServicesPlus.length && !props.loadingData) {\r\n setZoomMinutes(3);\r\n props.loadInitData(getInitPage(deviceActive?.timezone) + 1);\r\n setDomain(null);\r\n setShowStreaming(true);\r\n setEnableLoaderGraph(false);\r\n setIndexVariable(0);\r\n setFirstLine(1);\r\n setSecondLine(2);\r\n setThirdLine(3);\r\n setPointTooltip(null);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [props.devices, props.activeServicesPlus]);\r\n\r\n useEffect(() => {\r\n if (dataGraph?.length > 0) {\r\n const intervalX = [dataGraph[0].time, _.last(dataGraph).time];\r\n setEntireDomain({ x: intervalX });\r\n if (!domain) {\r\n setDomain({ x: [intervalX[1] - zoomMinutes * 60 * 1000 < intervalX[0] ? intervalX[0] : intervalX[1] - zoomMinutes * 60 * 1000, intervalX[1]] });\r\n }\r\n if (showStreaming && data.length) {\r\n setDomain({ x: [intervalX[1] - zoomMinutes * 60 * 1000 < intervalX[0] ? intervalX[0] : intervalX[1] - (zoomMinutes) * 60 * 1000, intervalX[1]] });\r\n }\r\n }\r\n else {\r\n setDomain(null);\r\n setShowStreaming(true);\r\n setData([]);\r\n setZoomMinutes(3);\r\n setIndexVariable(0);\r\n setFirstLine(1);\r\n setSecondLine(2);\r\n setThirdLine(3);\r\n setPointTooltip(null);\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [dataGraph, showStreaming]);\r\n\r\n useEffect(() => {\r\n if (domain) {\r\n let filtered = dataGraph.filter(item => item.time >= domain.x[0] - 30000 && item?.time <= domain.x[1] + 30000);\r\n if (filtered.length > 240) {\r\n const k = Math.ceil(filtered.length / 240);\r\n filtered = filtered.filter((_d, i) => ((i % k) === 0));\r\n }\r\n setData(filtered);\r\n const dataGraphNoInit = props.dataGraphPage.filter(item => !item?.init);\r\n const firstAvailablePage = dataGraphNoInit.length ? dataGraphNoInit[0]?.page : getInitPage(deviceActive?.timezone);\r\n const intervalLeft = (domain.x[0] - entireDomain.x[0]) / 60000;\r\n const verifyPageLeft = props.dataGraphPage.filter(item => item?.page === firstAvailablePage - 1);\r\n if (intervalLeft <= 60 && !props.enableHistory && !verifyPageLeft.length) {\r\n props.loadHistoryData(handleBeforeDay(firstAvailablePage - 1), false);\r\n }\r\n if (props.dataGraphPage.length >= 3) {\r\n const lastAvailablePage = _.last(dataGraphNoInit)?.page;\r\n const lastValueX = _.last(props.dataGraphPage[props.dataGraphPage.length - 2]?.data)?.time;\r\n const intervalRight = (lastValueX - domain.x[1]) / 60000;\r\n const verifyPage = props.dataGraphPage.filter(item => item?.page === lastAvailablePage + 1);\r\n if (intervalRight <= 60 && !verifyPage.length && !props.enableHistory && lastAvailablePage + 1 !== _.last(props.dataGraphPage).page - 1) {\r\n props.loadHistoryData(handleAfterDay(lastAvailablePage + 1), false);\r\n }\r\n }\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [domain, props.activeServicesPlus]);\r\n\r\n const handleBeforeDay = page => {\r\n if (page > 0) return { page: page, day: day, type: 0 }\r\n else {\r\n setDay(day + 1);\r\n return { page: 24, day: day + 1, type: 0 };\r\n }\r\n }\r\n\r\n const handleAfterDay = page => {\r\n if (page < 25) return { page: page, day: day, type: 1 }\r\n else {\r\n setDay(day - 1);\r\n return { page: 1, day: day - 1, type: 1 };\r\n }\r\n }\r\n\r\n const formatNumber = number => {\r\n if (number >= 1000) {\r\n number = (number / 1000).toFixed(2);\r\n return (`${number} k`)\r\n }\r\n else {\r\n return (`${(number).toFixed(2)} `);\r\n }\r\n }\r\n\r\n const handlerIndexVariable = (variable) => {\r\n if (variable === 'active_power_') setIndexVariable(0);\r\n if (variable === 'rms_voltage_') setIndexVariable(1);\r\n if (variable === 'rms_current_') setIndexVariable(2);\r\n }\r\n\r\n const handlerVariable = (variable) => {\r\n if (graph_2 === variable) {\r\n setGraph_2(graph_1);\r\n setGraph_1(variable);\r\n handlerIndexVariable(variable);\r\n }\r\n if (graph_3 === variable) {\r\n setGraph_3(graph_1);\r\n setGraph_1(variable);\r\n handlerIndexVariable(variable);\r\n }\r\n }\r\n\r\n const Tooltip = ({ scale }) => {\r\n let x = pointTooltip ? scale?.x(pointTooltip?.time) : 150;\r\n let y_1 = pointTooltip ? scale?.y(pointTooltip[`${graph_1}${typeLines ? firstLine : 1}`]) : 50;\r\n let y_2 = pointTooltip ? scale?.y(pointTooltip[`${graph_1}${typeLines ? firstLine : 2}`]) : 50;\r\n let y_3 = pointTooltip && deviceActive?.phases === 3 ? scale.y(pointTooltip[`${graph_1}${typeLines ? firstLine : 3}`]) : 50;\r\n let y_value = pointTooltip ? pointTooltip._y : 0;\r\n let y_value_1 = pointTooltip ? pointTooltip[`${graph_1}1`] : 0;\r\n let y_value_2 = pointTooltip ? pointTooltip[`${graph_1}2`] : 0;\r\n let y_value_3 = pointTooltip && deviceActive?.phases === 3 ? pointTooltip[`${graph_1}3`] : 0;\r\n let x_value = pointTooltip ? moment.utc(pointTooltip?.time).format('HH:mm:ss') : '00:00';\r\n const unit = graph_1 === 'active_power_' ? 'W' : graph_1 === 'rms_voltage_' ? 'V' : 'A';\r\n return (\r\n \r\n
\r\n )}\r\n \r\n\r\n
\r\n \r\n {gradients(theme)}\r\n
\r\n )\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n dataGraph: state.plus.dataGraph,\r\n loadingData: state.plus.loadingInitData,\r\n enableHistory: state.plus.enableHistory,\r\n dataGraphPage: state.plus.dataGraphPage,\r\n graphContinerWidth: ownProps.graphContinerWidth,\r\n devices: state.plus.devices,\r\n activeServicesPlus: state.services.activeServicesPlus,\r\n language: state.shared.language,\r\n lastConection: state.plus.lastConection,\r\n lastDay: state.plus.lastDay,\r\n lastPage: state.plus.lastPage,\r\n account: state.accounts.account,\r\n theme: state.theme.theme,\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n loadInitData: page => dispatch(plus.loadInitData(page)),\r\n loadHistoryData: (page, loading) => dispatch(plus.loadHistoryData(page, loading)),\r\n setEnableHistory: payload => dispatch(plus.setEnableHistory(payload)),\r\n loadDevices: () => dispatch(plus.loadDevices()),\r\n resetData: () => dispatch(plus.resetData()),\r\n loadServicesAsync: () => dispatch(servicesActions.loadServicesAsync()),\r\n setTheme: payload => dispatch(themeActions.setTheme(payload)),\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Graphs)","import React, { Fragment } from \"react\";\r\n\r\nimport { connect } from \"react-redux\";\r\n\r\nimport { VictoryChart, VictoryPolarAxis, VictoryLabel, VictoryStack, VictoryBar } from 'victory';\r\n\r\nimport { Swiper, SwiperSlide } from 'swiper/react';\r\n\r\nimport _ from 'lodash';\r\n\r\nimport empty_modules_plus from \"../../../../imgs/empty-modules-plus.svg\";\r\nimport empty_modules_plus_light from \"../../../../imgs/empty-modules-plus-light.svg\";\r\n\r\nimport ContentLoader from \"react-content-loader\";\r\n\r\nimport { track } from \"@amplitude/analytics-browser\";\r\n\r\nconst RenderCardEmpty = ({ language, theme }) => {\r\n return (\r\n \r\n {!props.loadingData && data.length ? \r\n
\r\n \r\n
: null}\r\n \r\n
\r\n {/* setTypeLines(!typeLines)} style={{width: 100}} className={`${!typeLines ? \"content-default-tertiary\" : \"button-fill-brand rounded-pill txt-black\"} text-center label-medium-regular pe-pointer mt-0 ${theme} py-2 px-3`}>{props.language.quality_graph_lines}
\r\nsetTypeLines(!typeLines)} style={{width: 100}} className={`${typeLines ? \"content-default-tertiary\" : \"button-fill-brand rounded-pill txt-black\"} text-center label-medium-regular pe-pointer py-2 px-3 mt-0 ${theme}`}>{props.language.quality_graph_variables}
\r\n\r\n { setTypeLines(!typeLines); }} />\r\n
*/}\r\n {\r\n typeLines && dataGraph.length &&\r\n {props.language.quality_graph_lines}
\r\n{props.language.quality_graph_variables}
\r\n\r\n
\r\n }\r\n { setIndexVariable(0); handlerVariable('active_power_'); track('Quality variable selected', { Quality_Variable_ID: 'active_power' }); }}>\r\n
\r\n {props.language.quality_graph_power}
\r\n { setIndexVariable(1); handlerVariable('rms_voltage_'); track('Quality variable selected', { Quality_Variable_ID: 'rms_voltage' }); }}>\r\n
\r\n {props.language.quality_graph_voltage}
\r\n { setIndexVariable(2); handlerVariable('rms_current_'); track('Quality variable selected', { Quality_Variable_ID: 'rms_current' }); }}>\r\n
\r\n {/* */}\r\n {props.language.quality_graph_electricity}
\r\n \r\n
\r\n \r\n {\r\n props.loadingData ?\r\n \r\n \r\n }\r\n :\r\n
\r\n {graphLoadingContainer(props.loadingData, props.language, theme)}
:\r\n data.length ?\r\n {typeLines ? `${variableName(graph_1)}-Línea ${firstLine}` : `${variableName(graph_1)}`}
\r\n setGrabbing(true)} onMouseUp={() => setGrabbing(false)} onMouseEnter={() => setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)} >\r\n {\r\n setDomain({ x: domainZoom.x });\r\n if (domain.x[1] === entireDomain.x[1]) setShowStreaming(true);\r\n else setShowStreaming(false);\r\n setEnableLoaderGraph(true);\r\n }}\r\n activateData={false}\r\n onActivated={(point => setPointTooltip(point[0]))}\r\n />}\r\n >\r\n {typeLines ?\r\n \r\n :\r\n \r\n \r\n }\r\n }>} \r\n style={{ \r\n axis: { stroke: \"transparent\" }, \r\n grid: {\r\n fill: theme === 'dark' ? \"var(--white)\" : \"var(--black)\", \r\n stroke: theme === 'dark' ? \"var(--white)\" : \"var(--black)\", \r\n pointerEvents: \"painted\",\r\n strokeWidth: 1,\r\n opacity: 0.2 }, \r\n tickLabels: {fill: theme === 'dark' ? \"var(--white)\" : \"var(--black)\", fontFamily: 'Inter', fontSize: 10}\r\n }} />\r\n {showTooltip ?
\r\n \r\n
\r\n {typeLines ? `${variableName(graph_1)}-Línea ${secondLine}` : `${variableName(graph_2)}`}
\r\n setGrabbing(true)} onMouseUp={() => setGrabbing(false)} onMouseEnter={() => setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)}>\r\n
\r\n {deviceActive?.phases === 2 && typeLines ? null :\r\n \r\n {\r\n setDomain({ x: domainZoom.x });\r\n if (domain.x[1] === entireDomain.x[1]) setShowStreaming(true);\r\n else setShowStreaming(false);\r\n setEnableLoaderGraph(true);\r\n }}\r\n //onActivated={enableTag? null : (point => setPointTooltip(point[0]))} \r\n />}\r\n >\r\n {typeLines ?\r\n \r\n :\r\n \r\n }\r\n `${t}`}\r\n tickLabelComponent={\r\n }>\r\n }\r\n style={{ \r\n axis: { stroke: \"transparent\" }, \r\n grid: {\r\n fill: theme === 'dark' ? \"var(--white)\" : \"var(--black)\", \r\n stroke: theme === 'dark' ? \"var(--white)\" : \"var(--black)\", \r\n pointerEvents: \"painted\",\r\n strokeWidth: 1,\r\n opacity: 0.2 }, \r\n tickLabels: {fill: theme === 'dark' ? \"var(--white)\" : \"var(--black)\", fontFamily: 'Inter', fontSize: 10}\r\n }} />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {typeLines ? `${variableName(graph_1)}-Línea ${thirdLine}` : `${variableName(graph_3)}`}
\r\n setGrabbing(true)} onMouseUp={() => setGrabbing(false)} onMouseEnter={() => setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)}>\r\n
\r\n \r\n {\r\n setDomain({ x: domainZoom.x });\r\n if (domain.x[1] === entireDomain.x[1]) setShowStreaming(true);\r\n else setShowStreaming(false);\r\n setEnableLoaderGraph(true);\r\n }}\r\n //onActivated={enableTag? null : (point => setPointTooltip(point[0]))} \r\n />}\r\n >\r\n {typeLines ?\r\n \r\n :\r\n \r\n }\r\n }>} \r\n style={{ \r\n axis: { stroke: \"transparent\" }, \r\n grid: {\r\n fill: theme === 'dark' ? \"var(--white)\" : \"var(--black)\", \r\n stroke: theme === 'dark' ? \"var(--white)\" : \"var(--black)\", \r\n pointerEvents: \"painted\",\r\n strokeWidth: 1,\r\n opacity: 0.2 }, \r\n tickLabels: {fill: theme === 'dark' ? \"var(--white)\" : \"var(--black)\", fontFamily: 'Inter', fontSize: 10}\r\n }} />\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {moment.utc(domain?.x[0]).format('HH:mm:ss')}
\r\n{moment.utc((domain?.x[0] + domain?.x[1]) / 2).format('HH:mm:ss')}
\r\n{moment.utc(domain?.x[1]).format('HH:mm:ss')}
\r\n\r\n \r\n {\r\n setDay(props.lastDay);\r\n //setPage(props.lastPage);\r\n await props.loadHistoryData({ page: props.lastPage, day: props.lastDay, type: 0 }, true);\r\n }}>\r\n {props.language.plus_graph_button_show_last_records_device}\r\n */}\r\n
\r\n }\r\n {props.language.plus_graph_text_empty_data_device}
\r\n{props.language.plus_graph_text_last_connection}{props.lastConection}
\r\n {/*\r\n { theme === 'dark' ?\r\n :\r\n \r\n }\r\n
\r\n )\r\n};\r\n\r\nconst IndicatorsLoading = props => {\r\n const {theme} = props;\r\n return (\r\n \r\n {language.plus_graph_title_empty_data}\r\n
\r\n \r\n \r\n
)\r\n };\r\n\r\nconst PowerFactor = (props) => {\r\n\r\n const { theme } = props;\r\n let deviceActive = props.activeServicesPlus.length ? props.devices.filter(value => value?.id_service === props.activeServicesPlus[0]?.idService) : [];\r\n\r\n return (\r\n \r\n track('Quality widget ll clicked')}>\r\n \r\n
\r\n {props.language.power_factor_title}
\r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n track('Quality widget ll clicked')} >\r\n \r\n
\r\n {props.language.power_factor_title}
\r\n\r\n track('Quality widget ll clicked')} >\r\n \r\n
\r\n \r\n \r\n {(deviceActive[0]?.phases === 2 ? [1, 2] : [1, 2, 3]).map((item) =>\r\n \r\n )}\r\n \r\n
\r\n \r\n \r\n }\r\n \r\n
\r\n {`${props.language.power_factor_label_phase} ${item}`}
\r\n\r\n \r\n datum.tick < _.last(props.dataGraph)[`power_factor_${item}`] * 100 ? \r\n (theme === 'dark' ? \"var(--gray-800)\" : \"var(--gray-200)\") : \r\n _.last(props.dataGraph)[`power_factor_${item}`] >= 0.92 ? \"url(#green)\" : _.last(props.dataGraph)[`power_factor_${item}`] >= 0.8 ? (theme === 'dark' ? \"var(--orange-500)\" : \"var(--orange-600)\") : \"url(#red)\", \r\n strokeWidth: (datum) => datum.tick < _.last(props.dataGraph)[`power_factor_${item}`] * 100 ? 3 : 1, \r\n strokeOpacity: 1,\r\n strokeDasharray: (datum) => datum.tick >= 100 ? \"4,4\" : null\r\n }\r\n }}\r\n />\r\n = 0.92 ? \"url(#green)\" : _.last(props.dataGraph)[`power_factor_${item}`] >= 0.8 ? (theme === 'dark' ? \"var(--orange-500)\" : \"var(--orange-600)\") : \"url(#red)\", strokeWidth: 2, width: 360, opacity: _.last(props.dataGraph)[`power_factor_${item}`] >= 0.7 ? 0.9 : 0.9 } }}\r\n >\r\n = 0.8 ? 16 : 14, fill: _.last(props.dataGraph)[`power_factor_${item}`] >= 0.92 ? \"url(#green)\" : _.last(props.dataGraph)[`power_factor_${item}`] >= 0.8 ? (theme === 'dark' ? \"var(--orange-500)\" : \"var(--orange-600)\") : \"url(#red)\", fontWeight: \"bold\"}}\r\n text={(_.last(props.dataGraph)[`power_factor_${item}`] ).toFixed(3) + \"\"}\r\n />\r\n \r\n
\r\n \r\n {_.last(props.dataGraph)[`power_factor_${item}`] >= 0.92 ?\r\n props.language.power_factor_label_optime_range :\r\n _.last(props.dataGraph)[`power_factor_${item}`] >= 0.8 ?\r\n props.language.power_factor_label_reactive_range :\r\n props.language.power_factor_label_deficient_range\r\n }\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {/*
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AnimatedComponent;\r\n","import React from \"react\"\r\n\r\nimport LogoLight from '../../../imgs/logo-enrg-light.svg'\r\nimport LogoDark from '../../../imgs/logo-enrg-dark.svg'\r\nimport AnimatedComponent from \"../utils/AnimatedComponent\"\r\nimport ThemedImage from \"../utils/ThemedImage\"\r\n\r\nimport { themes } from '../../../utils/enums';\r\n\r\nconst services = [\r\n { title: \"Home\", icon: \"energy\" },\r\n { title: \"Plus\", icon: \"plus\" },\r\n { title: \"Genius\", icon: \"genius\" },\r\n { title: \"Efficiency\", icon: \"efficiency\" },\r\n]\r\n\r\nexport const stepsDashboard = (language, theme) => {\r\n return ([\r\n {\r\n content: (\r\n \r\n
\r\n \r\n {type === 0 ?
\r\n \r\n \r\n
\r\n : {elementToRender.title}
\r\n\r\n \r\n
\r\n ),\r\n title: language.onboarding_dashboard_title_step1,\r\n description: language.onboarding_dashboard_description_step1,\r\n placement: \"center\",\r\n target: \"#navigate_dashboard\",\r\n disableBeacon: true,\r\n steps: 7,\r\n }, \r\n {\r\n content: (\r\n \r\n
\r\n ),\r\n title: language.onboarding_dashboard_title_step2,\r\n description: language.onboarding_dashboard_description_step2,\r\n placement: \"right\",\r\n target: \"#navigate_modules\",\r\n floaterProps: {\r\n disableAnimation: true,\r\n },\r\n disableBeacon: true,\r\n steps: 7,\r\n }, \r\n {\r\n content:\r\n \r\n
\r\n \r\n \r\n
,\r\n title: language.onboarding_dashboard_title_step3,\r\n description: language.onboarding_dashboard_description_step3,\r\n placement: \"right\",\r\n target: \"#navigate_modules\",\r\n floaterProps: {\r\n disableAnimation: true,\r\n },\r\n disableBeacon: true,\r\n steps: 7,\r\n }, \r\n {\r\n content: (\r\n \r\n
\r\n ),\r\n title: language.onboarding_dashboard_title_step4,\r\n description: language.onboarding_dashboard_description_step4,\r\n placement: \"auto\", \r\n target: \"#navigate_dashboard\",\r\n floaterProps: {\r\n disableAnimation: true,\r\n },\r\n disableBeacon: true,\r\n steps: 7,\r\n }, \r\n {\r\n content: (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n ),\r\n title: language.onboarding_dashboard_title_step5,\r\n description: language.onboarding_dashboard_description_step5,\r\n placement: \"auto\", \r\n target: \"#navigate_dashboard\",\r\n floaterProps: {\r\n disableAnimation: true,\r\n },\r\n disableBeacon: true,\r\n steps: 7,\r\n }, \r\n ])\r\n}\r\n","import React, { useRef, useEffect } from 'react'\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as energyActions from '../../store/actions/Energy';\r\nimport * as servicesActions from '../../store/actions/Services';\r\nimport * as sharedActions from '../../store/actions/Shared';\r\nimport * as invoicesActions from '../../store/actions/Invoices';\r\nimport * as accountsActions from '../../store/actions/Accounts';\r\n\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nimport Header from \"../shared/Header\";\r\n\r\nimport useTour from '../onboarding/hook/useTour';\r\nimport { stepsDashboard } from '../onboarding/steps/DashboardSteps';\r\n\r\nconst Dashboard = (props) => {\r\n\r\n let user = props.user;\r\n let account = props.account;\r\n let activeServicesEnergy = props.activeServicesEnergy;\r\n let startDashboardOnboarding = props.startDashboardOnboarding;\r\n let totalAccounts = props.totalAccounts;\r\n let screenPaddingBottom = props.screenPaddingBottom;\r\n let theme = props.theme;\r\n\r\n const loadDetailService = props.loadDetailService;\r\n const loadServicesAsync = props.loadServicesAsync;\r\n const setActiveServicesEnergy = props.setActiveServicesEnergy;\r\n const setActiveServicePreonboarding = props.setActiveServicePreonboarding; \r\n const setShowBlackScreen = props.setShowBlackScreen;\r\n const setStartOnboarding = props.setStartOnboarding;\r\n const setAccount = props.setAccount;\r\n const setFilterStatus = props.setFilterStatus;\r\n\r\n const history = useHistory();\r\n\r\n const frameEfficiency = useRef(null);\r\n\r\n const handleFirstTourFinish = () => {\r\n setStartOnboarding({ key: 'dashboard', value: true })\r\n };\r\n\r\n const tour = useTour({ steps: stepsDashboard(props.language, theme), localStorageKey: \"main-tutorial\", isOpenDrawer: null, setRunTour: setStartOnboarding, onTourFinish: handleFirstTourFinish });\r\n\r\n useEffect(() => {\r\n if (!activeServicesEnergy?.filter((item) => item?.idAccount === account?.idAccount).length) {\r\n account && loadServicesAsync()\r\n }\r\n // eslint-disable-next-line\r\n }, [account, loadServicesAsync])\r\n\r\n useEffect(() => {\r\n if (activeServicesEnergy.length) {\r\n setActiveServicesEnergy([])\r\n }\r\n }, [setActiveServicesEnergy, activeServicesEnergy])\r\n\r\n useEffect(() => {\r\n\r\n let window = frameEfficiency.current.contentWindow;\r\n\r\n window.postMessage(JSON.stringify({\r\n screenPaddingBottom\r\n }\r\n ), process.env.REACT_APP_DASHBOARD_HOST);\r\n\r\n }, [screenPaddingBottom])\r\n\r\n useEffect(() => {\r\n\r\n let window = frameEfficiency.current.contentWindow;\r\n\r\n window.postMessage(JSON.stringify({\r\n theme\r\n }\r\n ), process.env.REACT_APP_DASHBOARD_HOST);\r\n\r\n }, [theme])\r\n\r\n useEffect(() => {\r\n\r\n const userId = user?.idUser\r\n\r\n if (userId !== null) {\r\n\r\n frameEfficiency.current.addEventListener('load', () => {\r\n\r\n let window = frameEfficiency.current.contentWindow;\r\n\r\n let token = localStorage.getItem('token');\r\n\r\n setTimeout(() => {\r\n window.postMessage(JSON.stringify({\r\n token: token,\r\n user: { idUser: userId, capabilities: user?.capabilities },\r\n screenPaddingBottom,\r\n theme\r\n }\r\n ), process.env.REACT_APP_DASHBOARD_HOST);\r\n }, [100]);\r\n\r\n });\r\n };\r\n\r\n if (startDashboardOnboarding) {\r\n\r\n let window = frameEfficiency.current.contentWindow;\r\n\r\n window.postMessage(JSON.stringify({\r\n onboarding: startDashboardOnboarding\r\n }\r\n ), process.env.REACT_APP_DASHBOARD_HOST);\r\n\r\n setShowBlackScreen(true);\r\n }\r\n // eslint-disable-next-line\r\n }, [user.idUser, startDashboardOnboarding]);\r\n\r\n //iframe listener\r\n useEffect(() => {\r\n\r\n window.addEventListener('message', handleMessageFromIframe);\r\n\r\n return () => {\r\n window.removeEventListener('message', handleMessageFromIframe);\r\n };\r\n // eslint-disable-next-line\r\n }, []);\r\n\r\n const handleMessageFromIframe = (event) => {\r\n if (event.origin === process.env.REACT_APP_DASHBOARD_HOST) {\r\n const data = event.data; \r\n switch (data.type) {\r\n case 'Installation':\r\n history.push('pre-onboarding');\r\n setActiveServicePreonboarding(data);\r\n break\r\n case 'Generation':\r\n case 'Consumption':\r\n history.push({\r\n pathname: 'home/detail',\r\n state: { data }\r\n });\r\n loadDetailService(data)\r\n break\r\n case 'consolidate_invoices_no_debt':\r\n case 'consolidate_invoices_overdue':\r\n case 'consolidate_invoices_last_period': \r\n setFilterStatus(data?.statusInvoice);\r\n history.push({\r\n pathname: 'invoices',\r\n state: { data }\r\n }); \r\n setAccount((totalAccounts.find(a => a.idAccount === parseInt(data?.idAccount)))); \r\n break\r\n case 'plus':\r\n history.push({\r\n pathname: 'plus',\r\n state: { data }\r\n });\r\n loadDetailService(data)\r\n break\r\n default:\r\n break\r\n }\r\n\r\n if (data?.skippedOnboarding) { \r\n setStartOnboarding({ key: 'walktrough', value: true })\r\n }\r\n\r\n if (data?.finishedOnboarding) {\r\n setShowBlackScreen(false);\r\n setStartOnboarding({ key: 'dashboard', value: false })\r\n }\r\n\r\n }\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {tour}\r\n \r\n \r\n
\r\n );\r\n\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n user: state.users.user,\r\n activeServicesEnergy: state.services.activeServicesEnergy,\r\n account: state.accounts.account,\r\n language: state.shared.language,\r\n startDashboardOnboarding: state.shared.startOnboarding.dashboard,\r\n showBlackScreen: state.shared.showBlackScreen,\r\n totalAccounts: state.accounts.totalAccounts,\r\n totalServices: state.services.totalServices,\r\n screenPaddingBottom: state.shared.screenPaddingBottom,\r\n theme: state.theme.theme\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n loadDetailService: (payload) => dispatch(energyActions.loadDetailService(payload)),\r\n setActiveServicePreonboarding: (payload) => dispatch(servicesActions.setActiveServicePreonboarding(payload)),\r\n setActiveServicesEnergy: (payload) => dispatch(servicesActions.setActiveServicesEnergy(payload)),\r\n loadServicesAsync: (payload) => dispatch(servicesActions.loadServicesAsync(payload)),\r\n setShowBlackScreen: (payload) => dispatch(sharedActions.setShowBlackScreen(payload)),\r\n setStartOnboarding: (payload) => dispatch(sharedActions.setStartOnboarding(payload)),\r\n setAccount: (payload) => dispatch(accountsActions.setAccount(payload)),\r\n setFilterStatus: (payload) => dispatch(invoicesActions.setFilterStatus(payload)),\r\n setActiveServicesPlus: (payload) => dispatch(servicesActions.setActiveServicesPlus(payload)),\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Dashboard)","import React, { useRef, useEffect } from 'react'\r\nimport { connect } from 'react-redux';\r\n\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\nimport Header from \"../shared/Header\";\r\n\r\nconst Preonboarding = (props) => {\r\n\r\n let history = useHistory();\r\n\r\n let user = props.user;\r\n let activeServicePreonboarding = props.activeServicePreonboarding;\r\n let theme = props.theme;\r\n\r\n const framePreonboarding = useRef(null);\r\n\r\n useEffect(() => {\r\n\r\n const userId = user?.idUser\r\n const userType = user?.userType\r\n const userChatCapability = user?.capabilities?.preonboarding_chat_input_access \r\n\r\n if (userId !== null && activeServicePreonboarding !== null) {\r\n\r\n framePreonboarding.current.addEventListener('load', () => {\r\n\r\n let window = framePreonboarding.current.contentWindow;\r\n\r\n let token = localStorage.getItem('token');\r\n\r\n setTimeout(() => {\r\n window.postMessage(JSON.stringify({\r\n token: token,\r\n user: { idUser: userId, userType, userChatCapability },\r\n service: activeServicePreonboarding.idService,\r\n theme\r\n }), process.env.REACT_APP_PREONBOARDING_HOST)\r\n }, [100]);\r\n\r\n });\r\n } else {\r\n history.push('/home');\r\n }\r\n // eslint-disable-next-line\r\n }, [user.idUser, activeServicePreonboarding]);\r\n\r\n useEffect(() => {\r\n\r\n let window = framePreonboarding.current.contentWindow;\r\n\r\n window.postMessage(JSON.stringify({\r\n theme\r\n }), process.env.REACT_APP_PREONBOARDING_HOST);\r\n\r\n }, [theme])\r\n\r\n //iframe listener\r\n useEffect(() => {\r\n\r\n window.addEventListener('message', handleMessageFromIframe);\r\n\r\n return () => {\r\n window.removeEventListener('message', handleMessageFromIframe);\r\n };\r\n // eslint-disable-next-line\r\n }, []);\r\n\r\n const handleMessageFromIframe = (event) => {\r\n if (event.origin === process.env.REACT_APP_PREONBOARDING_HOST) {\r\n if (event.data.action === 'navigate') {\r\n history.push(event.data.path);\r\n }\r\n }\r\n };\r\n\r\n return (\r\n \r\n
);\r\n\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n user: state.users.user,\r\n language: state.shared.language,\r\n activeServicePreonboarding: state.services.activeServicePreonboarding,\r\n theme: state.theme.theme\r\n});\r\n\r\nexport default connect(mapStateToProps)(Preonboarding)\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport { useLocation } from 'react-router-dom';\r\n\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faChevronRight } from \"@fortawesome/pro-light-svg-icons\";\r\n\r\nimport ercoComputer from '../../imgs/erco-computer.png';\r\nimport ercoGeneration from '../../imgs/erco-generation.png';\r\nimport ercoEfficiency from '../../imgs/erco-efficiency.png';\r\nimport ercoScreen from '../../imgs/erco-screen.png';\r\n\r\nimport handWithPhone from '../../imgs/hand-with-phone.png';\r\nimport consumptionInfo from '../../imgs/consumption-info.png';\r\nimport energyReceipt from '../../imgs/energy-receipt.png';\r\n//import realTimeConsumption from '../../imgs/real-time-consumption.png';\r\n\r\nimport steps from '../../imgs/steps.png';\r\nimport leftChat from '../../imgs/left-chat.png';\r\nimport rightChat from '../../imgs/right-chat.png';\r\n\r\nconst getData = (section, showInvoices, language) => {\r\n\r\n const onboardingGeneration = [\r\n {\r\n title: language.onboarding_generation_title1, \r\n text: language.onboarding_generation_text1, \r\n imgPath: ercoComputer,\r\n classImageContainer: 'column-center align-items-end'\r\n }, \r\n {\r\n title: language.onboarding_generation_title2, \r\n text: language.onboarding_generation_text2, \r\n imgPath: ercoGeneration,\r\n classImage: 'w-100',\r\n classImageContainer: 'column-center align-items-end'\r\n },\r\n {\r\n title: language.onboarding_generation_title3, \r\n text: language.onboarding_generation_text3, \r\n imgPath: ercoEfficiency,\r\n classImage: 'w-100',\r\n classImageContainer: 'column-center align-items-center'\r\n },\r\n {\r\n title: language.onboarding_generation_title4, \r\n text: language.onboarding_generation_text4, \r\n imgPath: ercoScreen,\r\n classImage: 'w-100',\r\n classImageContainer: 'column-center align-items-end'\r\n }\r\n ];\r\n\r\n const onboardingPreonboarding = [\r\n {\r\n title: language.onboarding_preonboarding_title1, \r\n text: language.onboarding_preonboarding_text1, \r\n imgPath: steps,\r\n classImageContainer: 'column-center align-items-center'\r\n }, \r\n {\r\n title: language.onboarding_preonboarding_title2, \r\n text: language.onboarding_preonboarding_text2, \r\n imgPath: leftChat,\r\n classImageContainer: 'column-center align-items-end'\r\n },\r\n {\r\n title: language.onboarding_preonboarding_title3, \r\n text: language.onboarding_preonboarding_text3, \r\n imgPath: rightChat,\r\n classImageContainer: 'column-center align-items-start'\r\n }\r\n ];\r\n\r\n const nextStepsInfoConsumption = [\r\n {\r\n title: language.onboarding_consumption_title1, \r\n text: language.onboarding_consumption_text1, \r\n imgPath: handWithPhone,\r\n classImage: 'max-height-400',\r\n classImageContainer: 'column-center align-items-start'\r\n }, \r\n {\r\n title: language.onboarding_consumption_title2, \r\n text: language.onboarding_consumption_text2, \r\n imgPath: consumptionInfo,\r\n classImage: 'w-100',\r\n classImageContainer: 'column-center align-items-center'\r\n },\r\n {\r\n title: language.onboarding_consumption_title3, \r\n text: language.onboarding_consumption_text3, \r\n imgPath: energyReceipt,\r\n classImage: 'w-100',\r\n classImageContainer: 'column-center align-items-end'\r\n },\r\n {\r\n title: language.onboarding_consumption_title4, \r\n text: language.onboarding_consumption_text4,\r\n classImageContainer: 'column-center align-items-center'\r\n }\r\n ];\r\n\r\n switch (section) {\r\n case 'home':\r\n return showInvoices ? nextStepsInfoConsumption : onboardingGeneration;\r\n case 'pre-onboarding':\r\n return onboardingPreonboarding;\r\n default:\r\n return [];\r\n }\r\n\r\n}\r\n\r\nconst onboardingSections = [\r\n 'home',\r\n 'preonboarding'\r\n]\r\n\r\nconst OnboardingModal = (props) => {\r\n\r\n const location = useLocation();\r\n\r\n let showBetaMessage = props.showBetaMessage;\r\n let user = props.user;\r\n\r\n const [currentView, setCurrentView] = useState(0);\r\n const [isShowing, setIsShowing] = useState(true);\r\n const [data, setData] = useState([]);\r\n const [section, setSection] = useState(null);\r\n\r\n const handleContinueClick = () => {\r\n \r\n if (currentView < data.length - 1) {\r\n\r\n setCurrentView(currentView + 1);\r\n\r\n } else {\r\n\r\n setIsShowing(false);\r\n\r\n localStorage.setItem(`show_onboarding_${section}`, false);\r\n\r\n }\r\n\r\n };\r\n\r\n useEffect(() => {\r\n\r\n if (onboardingSections.includes(section)) {\r\n\r\n const showSection = localStorage.getItem(`show_onboarding_${section}`);\r\n\r\n if ((showSection === null || showSection === 'true') && user.capabilities?.show_onboarding_modals) {\r\n \r\n setData(getData(section, user.capabilities?.show_section_invoices, props.language));\r\n setIsShowing(true);\r\n \r\n };\r\n\r\n }\r\n // eslint-disable-next-line\r\n }, [section, user.capabilities]);\r\n\r\n useEffect(() => setSection(location.pathname.slice(1)), [location.pathname]);\r\n\r\n if (!isShowing || !data.length) {\r\n return null;\r\n }\r\n\r\n const isLastObject = currentView === data.length - 1;\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nconst mapStateToProps = (state, ownProps) => ({\r\n showBetaMessage: ownProps.showBetaMessage,\r\n language: state.shared.language,\r\n user: state.users.user\r\n});\r\n\r\nexport default connect(mapStateToProps)(OnboardingModal);\r\n","import React from 'react';\r\n\r\nimport 'react-toastify/dist/ReactToastify.css';\r\n\r\nconst RateNumber = ({ max, score, onChange }) => {\r\n\r\n let elements = Array.from({length: max}, (e, i)=> i);\r\n\r\n return(\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {data[currentView].title}\r\n
\r\n\r\n {data[currentView].text}\r\n
\r\n\r\n {\r\n data.map((_, index) => (\r\n \r\n ))\r\n }\r\n
\r\n \r\n ![{data[currentView].imgPath}]({data[currentView].imgPath})
\r\n
\r\n {\r\n showBetaMessage && (\r\n \r\n
\r\n )}\r\n \r\n {props.language.onboarding_modal_description}\r\n
\r\n\r\n \r\n
\r\n \r\n { isLastObject ? props.language.onboarding_modal_finally : props.language.onboarding_modal_continue }\r\n
\r\n {\r\n !isLastObject && (\r\n \r\n {elements.map((item, i) => \r\n
\r\n )\r\n}\r\n\r\nexport default RateNumber","import React, { useState } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as sharedActions from '../../store/actions/Shared';\r\n\r\nimport 'react-toastify/dist/ReactToastify.css';\r\nimport { toast } from \"react-toastify\";\r\n\r\nimport RateNumber from '../shared/utilities/RateNumber';\r\n\r\nconst PopUpScore = (props) => {\r\n\r\n const initValue = {\r\n qualify: 8,\r\n comment: '',\r\n specific_reason: '',\r\n channel: 0 \r\n }\r\n\r\n const maxCount = 200;\r\n\r\n const [charCounter, setCharCounter] = useState(0); \r\n const [surveyValue, setSurveyValue] = useState(initValue); \r\n const [score, setScore] = useState(0); \r\n const [firstSend, setFirstSend] = useState(false);\r\n const [service, setService] = useState(0); \r\n \r\n const handleSend = () => { \r\n if (firstSend) {\r\n if(surveyValue.qualify < 7) props.setNpsSurveyAsync({...surveyValue, type: service, label: false});\r\n if(surveyValue.qualify >= 7) props.setNpsSurveyAsync({...surveyValue, type: service, label: true});\r\n toast.dismiss()\r\n } else {\r\n setFirstSend(true)\r\n } \r\n }\r\n\r\n const inputHandler = (e) => {\r\n if (charCounter <= maxCount) {\r\n setCharCounter(e.target.value.length); \r\n }\r\n setSurveyValue({...surveyValue, comment: e.target.value})\r\n }; \r\n \r\n const inputHandlerSpecific = (e) => {\r\n if (charCounter <= maxCount) {\r\n setCharCounter(e.target.value.length); \r\n }\r\n setSurveyValue({...surveyValue, specific_reason: e.target.value})\r\n };\r\n \r\n return (\r\n \r\n onChange(item + 1)}/>\r\n
)}\r\n {item + 1}
\r\n \r\n {!firstSend && (\r\n
\r\n )\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n language: state.shared.language\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n setNpsSurveyAsync: payload => dispatch(sharedActions.setNpsSurveyAsync(payload)),\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(PopUpScore)","import React, { useEffect, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as sharedActions from '../../store/actions/Shared';\r\n\r\nimport 'react-toastify/dist/ReactToastify.css';\r\nimport { toast, ToastContainer } from \"react-toastify\";\r\n\r\nimport PopUpScore from './PopUpScore';\r\n\r\nconst NpsSurvey = (props) => { \r\n\r\n let language = props.language;\r\n let showNpsSurvey = props.showNpsSurvey;\r\n\r\n const loadUserNpsAsync = props.loadUserNpsAsync;\r\n\r\n useEffect(() => loadUserNpsAsync(), [loadUserNpsAsync]); \r\n\r\n useEffect(() => { \r\n if(showNpsSurvey && language){\r\n toast(\r\n
\r\n )} \r\n {firstSend && (\r\n {props.language.shared_survey_nps_title}
\r\n {props.language.shared_survey_nps_text_question}
\r\n \r\n {\r\n setSurveyValue({...surveyValue, qualify: value})\r\n setScore(value)\r\n }}/>\r\n
\r\n {props.language.shared_survey_nps_text_comment}
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {charCounter}/200
\r\n\r\n
\r\n )}\r\n {props.language.shared_survey_nps_text_secondary_title}
\r\n {props.language.shared_survey_nps_text_description}
\r\n {surveyValue.qualify < 7 ? props.language.shared_survey_nps_text_question_bad : surveyValue.qualify >= 7 && props.language.shared_survey_nps_text_question_good }
\r\n {service !== 4 ? \r\n
:\r\n setService(parseInt(target.value))}>\r\n {props.language.shared_survey_nps_list_option_bill}\r\n \r\n
\r\n setService(parseInt(target.value))}>\r\n {props.language.shared_survey_nps_list_option_platform}\r\n \r\n
\r\n setService(parseInt(target.value))}>\r\n {props.language.shared_survey_nps_list_option_customer}\r\n \r\n
\r\n setService(parseInt(target.value))}>\r\n {props.language.shared_survey_nps_list_option_pay}\r\n \r\n
\r\n setService(parseInt(target.value))}>\r\n {props.language.shared_survey_nps_list_option_other}\r\n \r\n
\r\n \r\n
} \r\n {surveyValue.qualify < 7 ? props.language.shared_survey_nps_text_specific_question_bad : surveyValue.qualify >= 7 && props.language.shared_survey_nps_text_specific_question_good}
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {charCounter}/200
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n {\r\n setOpen(!open);\r\n }}\r\n >\r\n
\r\n )}\r\n \r\n \r\n {selected.report_name}\r\n
\r\n\r\n \r\n\r\n \r\n {(state) => (\r\n \r\n \r\n
\r\n \r\n {reports.map((item) => (\r\n handleSelect(item)}\r\n >\r\n
\r\n ))}\r\n \r\n {item.report_name}\r\n
\r\n \r\n\r\n\r\n {isLoading && (\r\n
\r\n \r\n \r\n \r\n
\r\n )}\r\n \r\n setIsLoading(false)],\r\n ['error', function (event) { console.log(event.detail); }],\r\n ])\r\n }\r\n cssClassName=\"embed-container\"\r\n getEmbeddedComponent={(embeddedReport) => {\r\n window.report = embeddedReport;\r\n }}\r\n />\r\n
\r\n \r\n
\r\n );\r\n\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n user: state.users.user,\r\n account: state.accounts.account,\r\n language: state.shared.language,\r\n screenPaddingBottom: state.shared.screenPaddingBottom,\r\n theme: state.theme.theme\r\n});\r\n\r\nexport default connect(mapStateToProps)(Equote)","import React, { useEffect, useState } from 'react';\r\n\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\r\nimport { far } from '@fortawesome/pro-regular-svg-icons';\r\n\r\nimport { connect } from 'react-redux';\r\n\r\nimport DarkIncompleteUserInfoFinishedSVG from '../../imgs/incomplete_user_info_finished_dark.svg'\r\nimport LightIncompleteUserInfoFinishedSVG from '../../imgs/incomplete_user_info_finished_light.svg'\r\n\r\nimport { GETData, SETData } from '../../services/WebServices';\r\n\r\nimport { Modal, Whisper, Tooltip } from \"rsuite\"\r\n\r\nimport Select from '../shared/utilities/Select';\r\nimport InputRounded from '../shared/utilities/InputRounded';\r\n\r\nimport { themes } from '../../utils/enums';\r\n\r\nconst IncompleteUserinfoModal = ({\r\n theme,\r\n user,\r\n language\r\n}) => {\r\n\r\n const MODAL_VIEWS = {\r\n FORM: 0,\r\n FINISH: 1\r\n }\r\n\r\n const [modalView, setModalView] = useState(MODAL_VIEWS.FORM);\r\n const [openModal, setOpenModal] = useState(false);\r\n const [businessUnitsList, setBusinessUnitsList] = useState([]);\r\n const [preferencesList, setPreferencesList] = useState([]);\r\n const [businessUnitSelected, setBusinessUnitSelected] = useState(null);\r\n const [preferencesSelected, setPreferencesSelected] = useState([]);\r\n const [position, setPosition] = useState('');\r\n const [savingPreferenceData, setSavingPreferenceData] = useState(false);\r\n\r\n const validateFields = () => {\r\n\r\n if (modalView === MODAL_VIEWS.FINISH ) return false;\r\n\r\n const errors = {}\r\n\r\n if (preferencesSelected.length === 0) {\r\n errors.preferencesSelected = true\r\n }\r\n\r\n if (!businessUnitSelected) {\r\n errors.businessUnitSelected = true\r\n }\r\n\r\n if (position.length === 0) {\r\n errors.businessUnitSelected = true\r\n }\r\n\r\n return Object.values(errors).length > 0\r\n }\r\n\r\n const handleClose = () => {\r\n setOpenModal(false);\r\n };\r\n\r\n const getBusinessUnits = async () => {\r\n try {\r\n const businessUnits = await GETData('usersdev/businessUnits/19', 'GET');\r\n if (businessUnits && businessUnits.length) {\r\n setBusinessUnitsList(businessUnits);\r\n }\r\n } catch (err) {\r\n console.error(err)\r\n }\r\n };\r\n\r\n const getPreferences = async () => {\r\n try {\r\n const preferences = await GETData('users/users/interests', 'GET');\r\n if (preferences && preferences.length) {\r\n setPreferencesList(preferences);\r\n }\r\n } catch (err) {\r\n console.error(err)\r\n }\r\n };\r\n\r\n const handleClickPreference = (currentPreference) => {\r\n if (preferencesSelected.includes(currentPreference.idInterest)) {\r\n setPreferencesSelected(preferencesSelected.filter(p => p !== currentPreference.idInterest))\r\n } else {\r\n setPreferencesSelected([...preferencesSelected, currentPreference.idInterest])\r\n }\r\n }\r\n\r\n const onSave = async () => {\r\n if (modalView === MODAL_VIEWS.FORM) {\r\n if (!user || !businessUnitSelected || validateFields()) return;\r\n try {\r\n setSavingPreferenceData(true)\r\n await SETData('usersdev/users/preferencedata', 'POST', {\r\n idUser: user.idUser,\r\n personalInterestIds: preferencesSelected,\r\n channelIds: [],\r\n usePlatform: '',\r\n idBusinessUnit: businessUnitSelected\r\n });\r\n setModalView(MODAL_VIEWS.FINISH)\r\n } catch (err) {\r\n console.error(err)\r\n } finally {\r\n setSavingPreferenceData(false)\r\n }\r\n return;\r\n }\r\n setOpenModal(false);\r\n }\r\n\r\n useEffect(() => {\r\n getBusinessUnits();\r\n getPreferences()\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (user.capabilities.show_section_onboarding) {\r\n setOpenModal(true)\r\n }\r\n // setOpenModal(true)\r\n }, [user])\r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n modalView === MODAL_VIEWS.FORM ? (\r\n \r\n {language[modalView === MODAL_VIEWS.FINISH ? 'incomplete_user_info_modal_title_finished' : 'incomplete_user_info_modal_title']}\r\n
\r\n\r\n
\r\n )}\r\n />\r\n \r\n \r\n
\r\n \r\n {language['incomplete_user_info_modal_description_1']}\r\n
\r\n\r\n {language['incomplete_user_info_modal_description_2']}\r\n
\r\n\r\n \r\n \r\n {language[`tooltip_${item.valueText}`]}\r\n \r\n }>\r\n
\r\n \r\n {\r\n setBusinessUnitSelected(value);\r\n }}\r\n labelName={'name'}\r\n keyName='idBusinessUnits'\r\n defaultMessage=\"Tu área\"\r\n background={`surface-bg-surface`}\r\n width={'40vh'}\r\n height={150}\r\n completeHeight\r\n type_label='label-medium-medium'\r\n renderOptionContainer={({ children, width, height }) => (\r\n \r\n {children}\r\n
\r\n )}\r\n renderCustomOption={({ value, item, onClick, isSelected }) => (\r\n {language.incomplete_user_info_modal_business_units_label}
\r\n\r\n \r\n {language[item.valueText]}\r\n
\r\n {isSelected ? (\r\n \r\n setPosition(e.target.value)}\r\n px={3}\r\n py={2}\r\n />\r\n
\r\n \r\n {language.incomplete_user_info_modal_position_label}
\r\n{language['incomplete_user_info_modal_preferences_title']}
\r\n\r\n {\r\n preferencesList.map(currentPreference => {\r\n const isSelected = preferencesSelected.includes(currentPreference.idInterest)\r\n return (\r\n handleClickPreference(currentPreference)}\r\n className={`pe-pointer rounded-pill ${isSelected ? 'border-color-green' : 'surface-bg-on-surface'} ${theme}`}\r\n >\r\n \r\n {language[currentPreference.valueText]}\r\n
\r\n \r\n )\r\n })\r\n }\r\n \r\n \r\n ) : (\r\n \r\n \r\n
\r\n )\r\n }\r\n \r\n { language.incomplete_user_info_modal_finished_text }\r\n
\r\n\r\n {language['incomplete_user_info_modal_omit_button']}\r\n
\r\n \r\n \r\n ) : <>\r\n }\r\n\r\n {\r\n modalView === MODAL_VIEWS.FINISH ? (\r\n language['incomplete_user_info_modal_save_button_finish']\r\n ) : (\r\n (savingPreferenceData) ? language['incomplete_user_info_modal_save_button_loading'] : language['incomplete_user_info_modal_save_button']\r\n )\r\n }\r\n
\r\n \r\n \r\n \r\n \r\n )\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n theme: state.theme.theme,\r\n user: state.users.user,\r\n language: state.shared.language,\r\n});\r\n\r\nconst mapDispatchToProps = (dispatch) => ({\r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(IncompleteUserinfoModal);","import React, { useState } from \"react\";\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as sharedActions from '../../store/actions/Shared';\r\n\r\nimport { Popover } from \"@idui/react-popover\";\r\n\r\nconst PopoverAlerts = (props) => { \r\n\r\n const [focus, setFocus] = useState(false); \r\n const [show, setShow] = useState(false); \r\n\r\n const theme = props.theme\r\n\r\n const handlerClose = (state) => {\r\n setShow(state);\r\n props.setShowBlackScreenDrawer(state);\r\n setFocus(state); \r\n }\r\n\r\n return (\r\n\r\n
\r\n }>\r\n {props.onChangeEdit(true); handlerClose(false); }}>\r\n \r\n
\r\n {props.language.alerts_label_title_edit_alert}
\r\n {props.onChangeDuplicate(true); handlerClose(false); }}>\r\n \r\n
\r\n {props.language.popover_duplicate_alert}
\r\n {props.setOpenDeleteModal(true); handlerClose(false);}}>\r\n \r\n
\r\n {props.language.popover_delete_alert}
\r\n\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst mapStateToProps = (state) => ({ \r\n language: state.shared.language,\r\n theme: state.theme.theme,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({ \r\n setShowBlackScreenDrawer: (payload) => dispatch(sharedActions.setShowBlackScreenDrawer(payload)) \r\n});\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(PopoverAlerts);","import React from \"react\"\r\nimport { Modal } from \"rsuite\"\r\n\r\nconst DeleteAlertModal = ({ openModal, setOpenModal, deleteAlertAsync, alert, language, theme }) => {\r\n return (\r\n \r\n
\r\n \r\n )\r\n}\r\n\r\nexport default DeleteAlertModal","import React, { useState, useEffect } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport { Drawer } from 'rsuite';\r\n\r\nimport NewAlert from './NewAlert';\r\nimport PopoverAlerts from './PopoverAlerts';\r\nimport * as alertsActions from '../../store/actions/Alerts';\r\nimport * as plus from '../../store/actions/Plus';\r\n\r\nimport emptyDataAlerts from '../../imgs/empty_state_alerts.svg';\r\nimport emptyDataAlertsLight from '../../imgs/empty_state_alerts_light.svg';\r\nimport { track } from \"@amplitude/analytics-browser\";\r\nimport DeleteAlertModal from './DeleteAlertModal';\r\nimport BackButton from '../shared/utilities/BackButton';\r\n\r\nimport ContentLoader from \"react-content-loader\";\r\n\r\nconst AlertsLoading = ({theme}) => {\r\n\r\n const height = 85;\r\n\r\n return (\r\n \r\n
\r\n \r\n {\" \"}\r\n {language.alerts_messager_delete_title_confirmation}\r\n
\r\n{language.alerts_messager_delete_confirmation}
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n {Array.from({ length: 5 }, (_x, i) => i).map((i) =>
\r\n )\r\n};\r\n\r\nconst RenderAlert = ({ language, alert, setShowNewAlert, setAlertSelected, setEditAlert, setOpenDeleteModal, theme }) => {\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\nconst Alerts = (props) => {\r\n\r\n const [showNewAlert, setShowNewAlert] = useState(false);\r\n const [alertSelected, setAlertSelected] = useState(null);\r\n const [editAlert, setEditAlert] = useState(false);\r\n const [openDeleteModal, setOpenDeleteModal] = useState(false)\r\n\r\n let showBlackScreenDrawer = props.showBlackScreenDrawer;\r\n let showDrawerAlerts = props.showDrawerAlerts;\r\n let devices = props.devices;\r\n\r\n const loadAlertsAsync = props.loadAlertsAsync;\r\n const loadDevices = props.loadDevices;\r\n const loadGraphOptionsAsync = props.loadGraphOptionsAsync;\r\n const theme = props.theme;\r\n\r\n useEffect(() => loadAlertsAsync(), [loadAlertsAsync]); \r\n useEffect(() => loadGraphOptionsAsync(), [loadGraphOptionsAsync]); \r\n useEffect(() => {\r\n if (!devices.length) loadDevices();\r\n }, [loadDevices, devices]);\r\n\r\n return (\r\n \r\n \r\n { setAlertSelected(alert); setShowNewAlert(true); setEditAlert(true) }}\r\n onChangeDuplicate={() => { setAlertSelected(alert); setShowNewAlert(true); setEditAlert(false) }}\r\n setOpenDeleteModal={setOpenDeleteModal}\r\n />\r\n
\r\n {alert?.alert_name ? alert?.alert_name : language.alerts_label_no_name + alert?.id_alert}
\r\n\r\n \r\n
\r\n {alert?.services[0]?.name}
\r\n\r\n {\r\n showBlackScreenDrawer ?\r\n
\r\n \r\n );\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n language: state.shared.language,\r\n showBlackScreenDrawer: state.shared.showBlackScreenDrawer,\r\n alerts: state.alerts.alerts,\r\n loading: state.alerts.loading,\r\n showDrawerAlerts: state.alerts.showDrawerAlerts,\r\n newAlert: state.shared.startOnboarding.new_alert,\r\n showPulseAnimation: state.shared.showPulseAnimation,\r\n activeServicesEnergy: state.services.activeServicesEnergy,\r\n devices: state.plus.devices,\r\n theme: state.theme.theme,\r\n});\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n loadAlertsAsync: () => dispatch(alertsActions.loadAlertsAsync()),\r\n deleteAlertAsync: (payload) => dispatch(alertsActions.deleteAlertAsync(payload)),\r\n setShowDrawerAlerts: (payload) => dispatch(alertsActions.setShowDrawerAlerts(payload)),\r\n loadDevices: () => dispatch(plus.loadDevices()),\r\n loadGraphOptionsAsync: () => dispatch(alertsActions.loadGraphOptionsAsync())\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(Alerts);","import React, { useState, useEffect, useRef, Fragment } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as chatbotActions from \"../../store/actions/Chatbot\";\r\nimport * as sharedActions from \"../../store/actions/Shared\";\r\n\r\nimport { useRive, Layout, Fit, Alignment } from \"@rive-app/react-canvas\";\r\n\r\nconst LumiBanner = (props) => {\r\n\r\n const dragItem = useRef();\r\n const dragged = useRef(false);\r\n\r\n const windowWidth = window.innerWidth;\r\n const windowHeight = window.innerHeight;\r\n const elementWidth = 100;\r\n const elementHeight = 100;\r\n\r\n const lumiStyleActive = { \r\n transform: 'scale(1)'\r\n };\r\n\r\n const lumiStyleInactive = {\r\n transform: 'scale(0)'\r\n };\r\n\r\n let showChatBot = props.showChatBot;\r\n let showBannerChatbot = props.showBannerChatbot;\r\n\r\n const setShowChatBot = props.setShowChatBot;\r\n const setShowBannerChatbot = props.setShowBannerChatbot;\r\n //const setScreenPaddingBottom = props.setScreenPaddingBottom;\r\n\r\n const initialLeftPosition = windowWidth - elementWidth - 12;\r\n const initialTopPosition = windowHeight - elementHeight - 12;\r\n\r\n const [style, setStyle] = useState(lumiStyleActive);\r\n //const [close, setClose] = useState(false);\r\n const [topPosition, setTopPosition] = useState(initialTopPosition);\r\n const [leftPosition, setLeftPosition] = useState(initialLeftPosition);\r\n const [isReturning, setIsReturning] = useState(false);\r\n const [isDragging, setIsDragging] = useState(false);\r\n\r\n const { RiveComponent } = useRive({\r\n src: \"lumiAssets/lumi.riv\",\r\n stateMachines: \"State Machine 1\",\r\n layout: new Layout({\r\n fit: Fit.FitWidth,\r\n alignment: Alignment.Center,\r\n }),\r\n autoplay: true\r\n });\r\n\r\n const handleAnimation = () => {\r\n setShowChatBot(true);\r\n setShowBannerChatbot(true);\r\n };\r\n\r\n //const handleClose = (state) => setClose(state)\r\n\r\n useEffect(() => {\r\n\r\n if (showChatBot)\r\n setShowBannerChatbot(true);\r\n \r\n const stateStyle = showBannerChatbot\r\n ? lumiStyleActive\r\n : lumiStyleInactive;\r\n\r\n //setScreenPaddingBottom(showBannerChatbot ? 100 : 0);\r\n \r\n setStyle(stateStyle);\r\n\r\n // eslint-disable-next-line\r\n }, [showChatBot, showBannerChatbot]);\r\n\r\n const handleMouseDown = (e) => {\r\n dragItem.current = {\r\n startX: e.clientX - leftPosition,\r\n startY: e.clientY - topPosition,\r\n };\r\n dragged.current = false;\r\n setIsReturning(false);\r\n setIsDragging(true);\r\n window.addEventListener('pointermove', handleMouseMove);\r\n window.addEventListener('pointerup', handleMouseUp);\r\n };\r\n\r\n const handleMouseMove = (e) => {\r\n const newLeft = Math.max(115, Math.min(e.clientX - elementWidth/2, initialLeftPosition));\r\n const newTop = e.clientY - elementHeight/2;\r\n if (Math.abs(newLeft - leftPosition) > 5 || \r\n Math.abs(newTop - topPosition) > 5) {\r\n dragged.current = true;\r\n }\r\n setLeftPosition(newLeft);\r\n setTopPosition(newTop);\r\n };\r\n\r\n const handleMouseUp = () => {\r\n setIsReturning(true);\r\n setIsDragging(false);\r\n window.removeEventListener('pointermove', handleMouseMove);\r\n window.removeEventListener('pointerup', handleMouseUp);\r\n\r\n setTopPosition(initialTopPosition);\r\n\r\n if (!dragged.current) {\r\n handleAnimation()\r\n }\r\n };\r\n\r\n return (\r\n \r\n \r\n
: null\r\n }\r\n \r\n
\r\n \r\n { props.setShowDrawerAlerts(false); }} />\r\n
\r\n {props.language.alerts_label_main_title_drawer}
\r\n\r\n \r\n
\r\n {props.language.alerts_label_creation_indications}
\r\n \r\n{props.language.alerts_label_recently_created}
\r\n {props.loading ? \r\n\r\n {props.alerts.map((alert) => (\r\n
:\r\n \r\n
\r\n ))}\r\n \r\n \r\n
}\r\n {props.newAlert && }\r\n {props.language.alerts_label_title_empty_state}
\r\n {props.language.alerts_label_body_empty_state}
\r\n handleClose(true)} onMouseLeave={() => handleClose(false)}>\r\n \r\n
*/}\r\n { setShowBannerChatbot(false); track(\"Ai Lumi closed\"); }} style={{ transform: `translate(-30px, -24px)`, width: 24, height: 24 }}>\r\n \r\n
\r\n \r\n
\r\n )\r\n }\r\n\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n {title}
\r\n{description}
\r\n\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n )\r\n}\r\n\r\nconst mapStateToProps = state => ({\r\n language: state.shared.language,\r\n showBlackScreenDrawer: state.shared.showBlackScreenDrawer,\r\n showDrawerOnboarding: state.shared.showDrawerOnboarding,\r\n theme: state.theme.theme,\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n setShowDrawerOnboarding: payload => dispatch(sharedActions.setShowDrawerOnboarding(payload)),\r\n setStartOnboarding: payload => dispatch(sharedActions.setStartOnboarding(payload)),\r\n setShowDrawerAlerts: payload => dispatch(alertsActions.setShowDrawerAlerts(payload)),\r\n setShowCreateUserModal: payload => dispatch(usersActions.setShowCreateUserModal(payload)),\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(OnboardingSections)\r\n","import React from 'react';\r\n\r\nimport ThemedImage from \"../utils/ThemedImage\"\r\n\r\nexport const stepsProfile = (language, theme) => {\r\n return ([\r\n {\r\n content:\r\n \r\n
\r\n \r\n props.setShowDrawerOnboarding(false)}/>\r\n
\r\n {language.onboarding_drawer_title}
\r\n \r\n
\r\n \r\n {tutorialListInfo.slice(0, showItems).map(tutorial => {\r\n return {\r\n if (showItems === tutorialListInfo.length) {\r\n setShowItems(Math.floor(tutorialListInfo.length / 2))\r\n } else {\r\n setShowItems(tutorialListInfo.length)\r\n }\r\n }}>\r\n {showItems === tutorialListInfo.length ? `${language.onboarding_drawer_hide}` : `${language.onboarding_drawer_show}`}\r\n \r\n
\r\n \r\n \r\n
,\r\n title: language.onboarding_profile_title_step1,\r\n description: language.onboarding_profile_description_step1,\r\n placement: \"center\",\r\n target: \"#profile_menu\",\r\n disableBeacon: true,\r\n steps: 4\r\n },\r\n {\r\n content: \r\n \r\n
,\r\n title: language.onboarding_profile_title_step2,\r\n description: language.onboarding_profile_description_step2,\r\n placement: \"left\", \r\n target: \"#profile\",\r\n floaterProps: {\r\n disableAnimation: true,\r\n },\r\n disableBeacon: true,\r\n steps: 4\r\n },\r\n {\r\n content:\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {language.user_title_section_personal_data}
\r\n \r\n
,\r\n title: language.onboarding_profile_title_step3,\r\n description: language.onboarding_profile_description_step3,\r\n placement: \"left\", \r\n target: \"#profile\",\r\n floaterProps: {\r\n disableAnimation: true,\r\n },\r\n disableBeacon: true,\r\n steps: 4\r\n },\r\n {\r\n content:\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {language.user_title_section_create_users}
\r\n \r\n \r\n
,\r\n title: language.onboarding_profile_title_step4,\r\n description: language.onboarding_profile_description_step4,\r\n placement: \"left\", \r\n target: \"#profile\",\r\n floaterProps: {\r\n disableAnimation: true,\r\n },\r\n disableBeacon: true,\r\n scrollOffset: 40,\r\n steps: 4\r\n },\r\n ])\r\n};","import React from \"react\"\r\n\r\nimport ThemedImage from \"../utils/ThemedImage\"\r\n\r\nexport const stepsWalktrough = (language) => {\r\n return ([\r\n {\r\n content: (\r\n \r\n \r\n
\r\n ),\r\n title: language.onboarding_walktrough_title,\r\n description: language.onboarding_walktrough_description,\r\n placement: \"center\", \r\n target: \"#tooltip_walktrough\",\r\n disableBeacon: true,\r\n steps: 3,\r\n walktrough: true\r\n } \r\n ])\r\n}","import React from \"react\";\r\n\r\nexport const RadialBlueGradient = () => (\r\n \r\n)\r\n\r\nexport const RadialBlueLightGradient = () => (\r\n \r\n)\r\n\r\nexport const RadialGreenGradient = () => (\r\n \r\n)\r\n\r\nexport const RadialGreenLightGradient = () => (\r\n \r\n)\r\n\r\nexport const RadialPurpleGradient = () => (\r\n \r\n)\r\n\r\nexport const RadialPurpleLightGradient = () => (\r\n \r\n)\r\n\r\nexport const LinearRedOrangeGradient = () => (\r\n \r\n)","import React, { Fragment, useState, useEffect } from \"react\";\r\nimport { connect } from \"react-redux\";\r\n\r\nimport * as loginActions from \"../store/actions/Login\";\r\nimport * as sharedActions from \"../store/actions/Shared\";\r\n\r\nimport { Route, Redirect, Switch } from \"react-router-dom\";\r\n\r\nimport { Transition } from \"react-transition-group\";\r\n\r\nimport { Loader } from \"rsuite\";\r\n\r\nimport Users from \"./users/Users\";\r\nimport Energy from \"./energy/Energy\";\r\nimport Menu from \"./menu/Menu\";\r\nimport Invoices from \"./invoices/Invoices\";\r\nimport Account from \"./shared/Account\";\r\nimport Plus from \"./plus/Plus\";\r\nimport Efficiency from './efficiency/Efficiency';\r\nimport TagManager from './plus/dashboard/tags/TagManager';\r\nimport Genius from './genius/Genius';\r\nimport AlwaysOn from './plus/dashboard/alwayson/AlwaysOn';\r\nimport QualityEnergy from './plus/dashboard/quality/QualityEnergy';\r\nimport Dashboard from './dashboard/Dashboard';\r\nimport Preonboarding from './preonboarding/Preonboarding';\r\nimport OnboardingModal from './onboarding/OnboardingModal';\r\nimport NpsSurvey from './nps/NpsSurvey';\r\nimport Volt from \"./volt/Volt\";\r\nimport Analytics from \"./analytics/Analytics\";\r\nimport Equote from \"./equote/Equote\";\r\nimport IncompleteUserInfoModal from \"./onboarding/IncompleteUserInfoModal\";\r\n\r\nimport Alerts from \"./alerts/Alerts\";\r\nimport LumiBanner from \"./shared/LumiBanner\";\r\nimport OnboardingSections from \"./onboarding/OnboardingSections\";\r\n\r\nimport useTour from \"./onboarding/hook/useTour\";\r\nimport { stepsProfile } from \"./onboarding/steps/ProfileSteps\";\r\nimport { stepsAlert } from \"./onboarding/steps/AlertSteps\";\r\nimport { stepsWalktrough } from \"./onboarding/steps/WalktroughSteps\";\r\n\r\nimport {\r\n LinearRedOrangeGradient,\r\n RadialBlueGradient,\r\n RadialBlueLightGradient,\r\n RadialGreenGradient,\r\n RadialPurpleGradient,\r\n RadialPurpleLightGradient,\r\n RadialGreenLightGradient,\r\n} from \"./shared/svgs/Gradients\";\r\n\r\nconst ProtectedRoute = ({ component: Component, hasAccess, ...rest }) => {\r\n return (\r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n
,\r\n title: language.onboarding_alert_title_step1,\r\n description: language.onboarding_alert_description_step1,\r\n placement: \"left\", \r\n target: \"#added_alert\",\r\n disableBeacon: true,\r\n steps: 4,\r\n disableOverlayClose: true,\r\n spotlightClicks: true,\r\n hideFooter: true,\r\n hideFooterTitle: '¡Da click para descubrir cómo!',\r\n offset: 30,\r\n pulseEffect: true\r\n },\r\n {\r\n content:\r\n \r\n \r\n
,\r\n title: language.onboarding_alert_title_step2,\r\n description: language.onboarding_alert_description_step2,\r\n placement: \"left\",\r\n target: \"#new_alert\",\r\n disableBeacon: true,\r\n steps: 4,\r\n hideBackButton: true\r\n },\r\n {\r\n content:\r\n \r\n \r\n
,\r\n title: language.onboarding_alert_title_step3,\r\n description: language.onboarding_alert_description_step3,\r\n placement: \"left\",\r\n target: \"#new_alert\",\r\n disableBeacon: true,\r\n steps: 4\r\n },\r\n {\r\n content:\r\n \r\n \r\n
,\r\n title: language.onboarding_alert_title_step4,\r\n description: language.onboarding_alert_description_step4,\r\n placement: \"left\",\r\n target: \"#new_alert\",\r\n disableBeacon: true,\r\n steps: 4\r\n } \r\n ])\r\n};","import React, { Fragment, useState, useEffect } from \"react\";\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as loginActions from '../../store/actions/Login';\r\n\r\nimport { Redirect } from \"react-router-dom\";\r\n\r\nimport { Transition } from 'react-transition-group';\r\n\r\nimport { Loader, Alert } from 'rsuite';\r\n\r\nimport { getAnalytics, logEvent } from \"firebase/analytics\";\r\n\r\nimport InputRounded from \"../shared/utilities/InputRounded\";\r\n\r\nimport AuthCode from 'react-auth-code-input';\r\n\r\nimport { themes } from \"../../utils/enums\";\r\n\r\nconst analytics = getAnalytics();\r\n\r\nconst showAlert = message => {\r\n Alert.error(message);\r\n}\r\n\r\nconst Login = (props) => {\r\n\r\n let step = props.step;\r\n let theme = props.theme;\r\n let language = props.language;\r\n let loading = props.loading;\r\n\r\n const loadInitInfoAsync = props.loadInitInfoAsync;\r\n\r\n const logo = require(`../../imgs/logo-enrg-${theme}.svg`);\r\n\r\n const [inputValue, setInputValue] = useState(\"\");\r\n const [data, setData] = useState(\"\");\r\n\r\n const setInput = ((input) => {\r\n\r\n let value = input ? input : inputValue;\r\n\r\n if (step === 2) {\r\n\r\n props.loadInfoUserAsync(value, showAlert);\r\n setInputValue(\"\");\r\n\r\n } else {\r\n\r\n props.generateCodeAsync(value, showAlert);\r\n\r\n setData(value);\r\n setInputValue(\"\");\r\n\r\n }\r\n });\r\n\r\n useEffect(() => loadInitInfoAsync(), [loadInitInfoAsync]);\r\n\r\n useEffect(() => logEvent(analytics, \"login\"), []); \r\n\r\n return (\r\n \r\n \r\n {state => (\r\n \r\n \r\n }\r\n
\r\n \r\n
\r\n )}\r\n \r\n {step === 3 ?\r\n \r\n
\r\n \r\n 
\r\n
\r\n {step === 2 ? language.login_title_step_two : language.login_main_title}
\r\n\r\n
\r\n \r\n \r\n {step === 2 ?\r\n \r\n :\r\n \r\n setInputValue(target.value.trimStart().trimEnd())}\r\n onPressEnter={() => setInput()} />\r\n }\r\n
\r\n {language.login_input_label_code}
{data}
\r\n {\r\n if (value.length === 6){\r\n setInputValue(value);\r\n setInput(value);\r\n }\r\n }} />\r\n
\r\n \r\n
\r\n {language.login_question_code}
\r\n {props.resending ?\r\n{language.login_await_resend_code} {props.counter} {language.login_unit_await_resend_code}
:\r\nprops.generateCodeAsync(data, showAlert)}>{language.login_resend_code}
\r\n }\r\n{language.login_title_description}
\r\n{language.invoices_paid_title_state_approved}
;\r\n statusIcon = ;\r\n break;\r\n case \"RECHAZADA\":\r\n case \"FALLIDA\":\r\n margin = \r\n statusMessage = {language.invoices_paid_title_state_declined}
;\r\n statusIcon = ;\r\n break;\r\n default:\r\n margin = \r\n statusMessage = {language.invoices_paid_title_state_pending}
;\r\n statusIcon = ;\r\n break;\r\n }\r\n\r\n }\r\n\r\n return (\r\n \r\n {transaction !== null && Object.keys(language).length ?\r\n \r\n :\r\n
\r\n )\r\n }\r\n};\r\n","import React, { useEffect, useState, useRef } from 'react';\r\nimport { connect } from 'react-redux';\r\n\r\nimport * as sharedActions from \"../../../../store/actions/Shared\";\r\n\r\nimport queryString from 'query-string';\r\n\r\nimport ReactToPrint from 'react-to-print';\r\n\r\nimport PaidStatus from './PaidStatus';\r\n\r\nimport { GETData } from '../../../../services/WebServices';\r\n\r\nconst Paid = (props) => {\r\n\r\n let language = props.language;\r\n\r\n const componentRef = useRef();\r\n\r\n const [transaction, setTransaction] = useState(null);\r\n\r\n const loadLanguageAsync = props.loadLanguageAsync\r\n\r\n useEffect(() => {\r\n\r\n let url = props.location.search;\r\n let params = queryString.parse(url);\r\n\r\n const complement = params.ticket ? `/${params.ticket}` : '';\r\n\r\n GETData(`${params.provider}/transaction/${params.order}${complement}`, 'GET')\r\n .then((result) => { if (result !== null) { setTransaction(result); } });\r\n\r\n }, [props, setTransaction]);\r\n\r\n useEffect(() => {\r\n if (!Object.keys(language).length)\r\n loadLanguageAsync();\r\n }, [loadLanguageAsync, language]);\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {language.invoices_paid_title_payment_receipt}
\r\n {transaction.date}
\r\n \r\n {margin}\r\n {statusIcon}\r\n {statusMessage}\r\n
\r\n \r\n
\r\n \r\n
\r\n {language.invoices_paid_text_method}
\r\n {language[`invoices_paid_text_${transaction.method}_method`]}
\r\n \r\n
\r\n {language.invoices_paid_text_ref}
\r\n {transaction.reference}
\r\n \r\n
\r\n {\r\n transaction.email ?\r\n {language.invoices_paid_text_description}
\r\n {transaction.description}
\r\n \r\n
: null\r\n }\r\n {language.invoices_paid_text_email}
\r\n {transaction.email}
\r\n \r\n
\r\n {language.invoices_paid_text_transaction_details}
\r\n \r\n
\r\n {language.invoices_paid_text_total_bill}
\r\n \r\n
\r\n {\r\n transaction.commission > 0 ?\r\n {language.invoices_paid_text_neugets_discount}
\r\n \r\n
: null\r\n }\r\n {language.invoices_paid_text_commission}
\r\n \r\n
\r\n {language.invoices_paid_text_total_payment}
\r\n \r\n
\r\n \r\n
\r\n {transaction != null && Object.keys(language).length ?\r\n \r\n }\r\n content={() => componentRef.current}\r\n />\r\n {props.language.invoices_paid_link_finally}\r\n
: null\r\n }\r\n \r\n \r\n {state => (\r\n
\r\n );\r\n};\r\n\r\nconst mapStateToProps = (state) => ({\r\n language: state.shared.language,\r\n theme: state.theme.theme\r\n})\r\n\r\nconst mapDispatchToProps = dispatch => ({\r\n loadLanguageAsync: () => dispatch(sharedActions.loadLanguageAsync())\r\n})\r\n\r\nexport default connect(mapStateToProps, mapDispatchToProps)(MobileScreen);","import React, { useRef, useEffect } from 'react'\r\nimport { connect } from 'react-redux';\r\n\r\nimport { useLocation, useHistory } from 'react-router-dom';\r\n\r\nconst Onboarding = (props) => {\r\n\r\n const location = useLocation();\r\n const history = useHistory();\r\n\r\n let user = props.user;\r\n let step = props.step;\r\n let theme = props.theme;\r\n\r\n const frameOnboarding = useRef(null);\r\n\r\n const handleMessageFromIframe = (event) => {\r\n if (event.origin === process.env.REACT_APP_ONBOARDING_HOST) {\r\n\r\n const data = event.data;\r\n\r\n if (data.pathname)\r\n history.push(data.pathname);\r\n\r\n }\r\n };\r\n\r\n //iframe listener\r\n useEffect(() => {\r\n\r\n window.addEventListener('message', handleMessageFromIframe);\r\n\r\n return () => {\r\n window.removeEventListener('message', handleMessageFromIframe);\r\n };\r\n // eslint-disable-next-line\r\n }, []);\r\n\r\n useEffect(() => {\r\n\r\n const userId = user?.idUser\r\n\r\n if (userId !== null && userId !== undefined && step === 3) {\r\n\r\n frameOnboarding.current.addEventListener('load', () => {\r\n\r\n let window = frameOnboarding.current.contentWindow;\r\n\r\n let token = localStorage.getItem('token');\r\n\r\n setTimeout(() => {\r\n window.postMessage(JSON.stringify({\r\n token: token,\r\n user: { idUser: userId, userType: user?.userType },\r\n theme\r\n }\r\n ), process.env.REACT_APP_ONBOARDING_HOST);\r\n }, [100]);\r\n\r\n });\r\n\r\n } else {\r\n\r\n if (!location.pathname.includes('invite'))\r\n history.push('/home')\r\n }\r\n // eslint-disable-next-line\r\n }, [user?.idUser, step]);\r\n\r\n useEffect(() => {\r\n\r\n let window = frameOnboarding.current.contentWindow;\r\n\r\n window.postMessage(JSON.stringify({\r\n theme\r\n }), process.env.REACT_APP_ONBOARDING_HOST);\r\n\r\n }, [theme])\r\n\r\n return (\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n {language.main_title_mobile_screen}
\r\n \r\n 
\r\n \r\n \r\n 
\r\n \r\n
\r\n {language.main_description_mobile_screen}
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
);\r\n\r\n}\r\n\r\nconst mapStateToProps = (state) => ({\r\n user: state.users.user,\r\n step: state.login.step,\r\n language: state.shared.language,\r\n theme: state.theme.theme\r\n});\r\n\r\nexport default connect(mapStateToProps)(Onboarding)\r\n","import React, { Component } from \"react\";\r\nimport { Provider, connect } from \"react-redux\";\r\n\r\nimport { Route, Switch } from \"react-router-dom\";\r\n\r\nimport Store from \"./store/Store\";\r\n\r\nimport Main from \"./components/Main\";\r\nimport Login from \"./components/login/Login\";\r\nimport Paid from \"./components/invoices/pay/paid/Paid\";\r\nimport MobileScreen from \"./components/shared/MobileScreen\";\r\nimport Onboarding from \"./components/onboarding/Onboarding\";\r\n\r\nimport \"./styles/style.scss\";\r\nimport \"./icons/css/all.css\";\r\n\r\nimport \"rsuite/dist/styles/rsuite-default.min.css\";\r\n\r\nimport \"react-circular-progressbar/dist/styles.css\";\r\nimport \"swiper/swiper.scss\";\r\nimport \"swiper/modules/navigation/navigation.scss\";\r\n\r\nimport { getAnalytics, logEvent } from \"firebase/analytics\";\r\n\r\nconst analytics = getAnalytics();\r\n\r\nclass App extends Component {\r\n static displayName = App.name;\r\n\r\n componentDidMount() {\r\n const currentVersion = (document.querySelector('meta[name=\"app-version\"]'))?.content;\r\n const storedVersion = localStorage.getItem('app-version');\r\n\r\n if (!storedVersion || (storedVersion && storedVersion !== currentVersion)) {\r\n console.log('entré a la versión')\r\n localStorage.setItem('app-version', currentVersion);\r\n caches.keys().then(function(names) {\r\n for (let name of names) caches.delete(name);\r\n }).then(() => window.location.reload());\r\n window.location.reload();\r\n }\r\n logEvent(analytics, \"open_app\");\r\n this.updateBodyClass();\r\n }\r\n\r\n componentDidUpdate(prevProps) {\r\n if (prevProps.theme !== this.props.theme) {\r\n this.updateBodyClass();\r\n }\r\n }\r\n\r\n componentWillUnmount() {\r\n logEvent(analytics, \"close_app\");\r\n }\r\n\r\n updateBodyClass() {\r\n document.body.className = \"\";\r\n document.body.classList.add(this.props.theme);\r\n }\r\n\r\n render() {\r\n return (\r\n \r\n \r\n \r\n
\r\n