\n \n {stateUpload.length === 0 && (\n \n {({ getRootProps, getInputProps }) => (\n \n \n \n \n )}\n \n )}\n {stateUpload.length === 0 ? (\n \n ) : (\n \n )}\n {valueInput !== \"\" ? (\n \n \n \n ) : (\n <>\n {window.isSecureContext === true && (\n \n )}\n\n \n \n \n \n )}\n \n \n \n );\n};\n\nexport default Conversation;\n","import styled from \"styled-components\";\n\nexport const G4ContainerCustomerExperience = styled.div`\n display: flex;\n flex-direction: column;\n font-family: Roboto, sans-serif;\n font-size: 15px;\n overflow-y: scroll;\n height: 100%;\n align-items: center;\n box-sizing: border-box;\n`;\n\nexport const G4CustomerExperienceImgDiv = styled.div`\n text-align: center;\n justify-content: center;\n display: flex;\n vertical-align: middle;\n width: 100%;\n height: 100px;\n`;\n\nexport const G4CustomerExperienceImg = styled.img`\n max-width: 150px;\n max-height: 80px;\n margin: auto;\n`;\n\nexport const G4FormCustomerExperience = styled.form`\n margin-top: 10px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n`;\n\nexport const G4TextAreaCustomerExperience = styled.textarea`\n border: 1px solid #888;\n padding: 5px;\n margin-top: 2px;\n margin-bottom: 50px;\n border-radius: 6px;\n width: 90%;\n resize: none;\n\n &:focus {\n outline: 0;\n }\n`;\n\nexport const G4TextAriaLabel = styled.label`\n width: 90%;\n`;\n\nexport const G4ButtonCustomerExperience = styled.button`\n padding: 10px 20px;\n margin-left: 0px;\n font-size: 20px;\n font-family: \"Roboto\", sans-serif;\n cursor: pointer;\n color: #fff;\n position: absolute;\n overflow: hidden;\n transition: 0.8s;\n bottom: 0px;\n right: 0;\n height: 42px;\n width: 100%;\n border-radius: 0px 0px 10px 10px;\n\n ${(props) => props.color && `background: ${props.color};`}\n ${(props) => props.color && `border: 1px solid ${props.color};`}\n\n &:focus {\n outline: 0;\n }\n`;\n\n// &:hover {\n// background: #09793c;\n// border: 1px solid #09793c;\n// }\n\nexport const ForgotContainer = styled.div`\n display: flex;\n box-sizing: border-box;\n align-items: center;\n justify-content: center;\n\n .img-logo-g4flex {\n text-align: center;\n margin-bottom: 25px;\n }\n\n .g4-button {\n background-color: #3f51b5;\n border-color: #3f51b5;\n }\n\n .g4-button:hover {\n background-color: #757de8;\n border-color: #757de8;\n }\n`;\n\nexport const FormContainer = styled.div`\n flex-basis: 70%;\n display: flex;\n flex-direction: column;\n margin: 50px;\n`;\n\nexport const G4CenteredDiv = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 90%;\n text-align: center;\n`;\n\nexport const G4QuestionTag = styled.div`\n margin-top: 15px;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 90%;\n text-align: center;\n`;\n","import { apiNps } from '../../../services/api-http';\n\n\nclass SurveyService {\n getTags = () => {\n return apiNps.get(`tags`);\n };\n\n getSurveyConfig = (surveyId) => {\n return apiNps.get(`configuration/survey/${surveyId}`);\n };\n\n sendInquiry = (conversationId, surveyId, data) => {\n return apiNps.post(\n `satisfaction/survey/answer/${conversationId}/${surveyId}`,\n data\n );\n };\n}\n\nexport default new SurveyService();\n","import { makeStyles } from '@material-ui/core/styles';\n\nexport const satisfactionStyles = makeStyles({\n iconFilled: {},\n iconFilled1: { color: '#d9534f' },\n iconFilled2: { color: '#d9534f' },\n iconFilled3: { color: '#d9534f' },\n iconFilled4: { color: '#f0ad4e' },\n iconFilled5: { color: '#5cb85c' },\n iconHover: {},\n iconHover1: { color: '#d9534f' },\n iconHover2: { color: '#d9534f' },\n iconHover3: { color: '#d9534f' },\n iconHover4: { color: '#f0ad4e' },\n iconHover5: { color: '#5cb85c' }\n});\n\nexport const npsStyles = makeStyles({\n iconFilled: {},\n iconFilled1: { color: '#d9534f' },\n iconFilled2: { color: '#d9534f' },\n iconFilled3: { color: '#d9534f' },\n iconFilled4: { color: '#d9534f' },\n iconFilled5: { color: '#d9534f' },\n iconFilled6: { color: '#d9534f' },\n iconFilled7: { color: '#f0ad4e' },\n iconFilled8: { color: '#f0ad4e' },\n iconFilled9: { color: '#5cb85c' },\n iconFilled10: { color: '#5cb85c' },\n iconHover: {},\n iconHover1: { color: '#d9534f' },\n iconHover2: { color: '#d9534f' },\n iconHover3: { color: '#d9534f' },\n iconHover4: { color: '#d9534f' },\n iconHover5: { color: '#d9534f' },\n iconHover6: { color: '#d9534f' },\n iconHover7: { color: '#f0ad4e' },\n iconHover8: { color: '#f0ad4e' },\n iconHover9: { color: '#5cb85c' },\n iconHover10: { color: '#5cb85c' }\n});\n\nexport const getPropsHoverNPS = (newHover, npsStyle) => {\n switch (true) {\n case newHover <= 1: {\n return npsStyle.iconHover1;\n }\n case newHover <= 2 && newHover > 1: {\n return npsStyle.iconHover2;\n }\n case newHover <= 3 && newHover > 2: {\n return npsStyle.iconHover3;\n }\n case newHover <= 4 && newHover > 3: {\n return npsStyle.iconHover4;\n }\n case newHover <= 5 && newHover > 4: {\n return npsStyle.iconHover5;\n }\n case newHover <= 6 && newHover > 5: {\n return npsStyle.iconHover6;\n }\n case newHover <= 7 && newHover > 6: {\n return npsStyle.iconHover7;\n }\n case newHover <= 8 && newHover > 7: {\n return npsStyle.iconHover8;\n }\n case newHover <= 9 && newHover > 8: {\n return npsStyle.iconHover9;\n }\n case newHover <= 10 && newHover > 9: {\n return npsStyle.iconHover10;\n }\n default:\n break;\n }\n};\n\nexport const getPropsFilledNPS = (newValue, npsStyle) => {\n switch (true) {\n case newValue <= 1: {\n return npsStyle.iconFilled1;\n }\n case newValue <= 2 && newValue > 1: {\n return npsStyle.iconFilled2;\n }\n case newValue <= 3 && newValue > 2: {\n return npsStyle.iconFilled3;\n }\n case newValue <= 4 && newValue > 3: {\n return npsStyle.iconFilled4;\n }\n case newValue <= 5 && newValue > 4: {\n return npsStyle.iconFilled5;\n }\n case newValue <= 6 && newValue > 5: {\n return npsStyle.iconFilled6;\n }\n case newValue <= 7 && newValue > 6: {\n return npsStyle.iconFilled7;\n }\n case newValue <= 8 && newValue > 7: {\n return npsStyle.iconFilled8;\n }\n case newValue <= 9 && newValue > 8: {\n return npsStyle.iconFilled9;\n }\n case newValue <= 10 && newValue > 9: {\n return npsStyle.iconFilled10;\n }\n default:\n break;\n }\n};\n\nexport const getPropsHoverSatisfacao = (newHover, npsStyle) => {\n switch (true) {\n case newHover <= 1: {\n return npsStyle.iconHover1;\n }\n case newHover <= 2 && newHover > 1: {\n return npsStyle.iconHover2;\n }\n case newHover <= 3 && newHover > 2: {\n return npsStyle.iconHover3;\n }\n case newHover <= 4 && newHover > 3: {\n return npsStyle.iconHover4;\n }\n case newHover <= 5 && newHover > 4: {\n return npsStyle.iconHover5;\n }\n default:\n break;\n }\n};\n\nexport const getPropsFilledSatisfacao = (newValue, npsStyle) => {\n switch (true) {\n case newValue <= 1: {\n return npsStyle.iconFilled1;\n }\n case newValue <= 2 && newValue > 1: {\n return npsStyle.iconFilled2;\n }\n case newValue <= 3 && newValue > 2: {\n return npsStyle.iconFilled3;\n }\n case newValue <= 4 && newValue > 3: {\n return npsStyle.iconFilled4;\n }\n case newValue <= 5 && newValue > 4: {\n return npsStyle.iconFilled5;\n }\n default:\n break;\n }\n};\n","import styled from 'styled-components';\n\nexport const RatingBox = styled.div`\n height: 35px;\n width: 35px;\n min-width: 35px;\n display: flex;\n justify-content: center;\n align-items: center;\n tex-align: center;\n`;\n\n\n\n","import React, { useEffect, useState } from \"react\";\nimport { Rating } from \"@material-ui/lab\";\nimport {\n npsStyles,\n satisfactionStyles,\n getPropsHoverNPS,\n getPropsFilledNPS,\n getPropsHoverSatisfacao,\n getPropsFilledSatisfacao,\n} from \"./assets\";\nimport { RatingBox } from \"./assets/styled\";\n\nconst FlexRating = ({ setRate, rate, type }) => {\n const [hover, setHover] = useState(-1);\n const [qtdStars, setQtdStars] = useState(0);\n\n const satisfacaoStyle = satisfactionStyles();\n const npsStyle = npsStyles();\n\n const [iconFilledVar, setIconFilled] = useState(null);\n const [iconHoverVar, setIconHover] = useState(null);\n\n useEffect(() => {\n switch (type) {\n case \"satisfacao\":\n setQtdStars(5);\n break;\n case \"nps\":\n setQtdStars(10);\n break;\n default:\n break;\n }\n }, [type, npsStyle, satisfacaoStyle]);\n\n return (\n <>\n \n \n \n {hover !== -1 ? hover : rate !== 0 && rate}\n
\n \n
\n \n {\n setRate(newValue);\n switch (type) {\n case \"satisfacao\":\n setIconFilled(\n getPropsFilledSatisfacao(newValue, satisfacaoStyle)\n );\n break;\n case \"nps\":\n setIconFilled(getPropsFilledNPS(newValue, npsStyle));\n break;\n default:\n break;\n }\n }}\n onChangeActive={(event, newHover) => {\n setHover(newHover);\n switch (type) {\n case \"satisfacao\":\n setIconHover(\n getPropsHoverSatisfacao(newHover, satisfacaoStyle)\n );\n break;\n case \"nps\":\n setIconHover(getPropsHoverNPS(newHover, npsStyle));\n break;\n default:\n break;\n }\n }}\n classes={{\n iconFilled: iconFilledVar,\n iconHover: iconHoverVar,\n }}\n />\n
\n \n );\n};\n\nexport default FlexRating;\n","import React, { useState, useEffect } from \"react\";\nimport { useDispatch } from \"react-redux\";\nimport {\n G4ContainerCustomerExperience,\n G4FormCustomerExperience,\n G4CustomerExperienceImgDiv,\n G4CustomerExperienceImg,\n G4TextAreaCustomerExperience,\n G4ButtonCustomerExperience,\n G4TextAriaLabel,\n G4CenteredDiv,\n G4QuestionTag,\n} from \"./components/styled\";\nimport \"./components/SurveyRating.css\";\nimport { getLogoChatURL } from \"../../../../components/logos\";\nimport { nextPage } from \"../../../../store/page/actions\";\nimport MultipleSelectChips from \"@bit/lubuskie.material-ui.multiple-select-chips\";\nimport SurveyService from \"../../service\";\nimport FlexRating from \"./components/FlexRating\";\n\nconst END = \"End\";\n\nconst SurveyRating = ({ conversationId, surveyConfig, color }) => {\n const dispatch = useDispatch();\n const [optionTags, setOptionTags] = useState(null);\n const [questionTag, setQuestionTag] = useState(\"\");\n const [rate, setRate] = useState(0);\n const [selectedTags, setSelectedTags] = useState([]);\n const [observation, setObservation] = useState(\"\");\n const [logoURL, setLogoURL] = useState(null);\n\n useEffect(() => {\n getLogoChatURL()\n .then((source) => {\n setLogoURL(source);\n })\n .catch(() => console.error(\"[LOGIN FORM] Error loading chat logo\"));\n }, []);\n\n useEffect(() => {\n let aux = false;\n setSelectedTags([]);\n\n surveyConfig.answers.forEach((el) => {\n if (el[\"rate\"] === rate) {\n let arrayTag = [];\n el[\"tags\"] &&\n el[\"tags\"].forEach((tag) => {\n arrayTag.push({ label: tag.name, value: tag });\n });\n setOptionTags(arrayTag);\n setQuestionTag(el.question_tag);\n aux = true;\n }\n });\n\n if (rate === null || aux === false) {\n setQuestionTag(null);\n setOptionTags(null);\n }\n }, [rate, surveyConfig]);\n\n const npsSubmit = (event) => {\n event.preventDefault();\n if (rate < 1) {\n console.log(`Por favor, atribua uma pontuação!`);\n } else {\n const formatedData = {\n channel: \"chat\",\n observation: observation,\n rate: rate,\n type_survey: surveyConfig.type_survey,\n tags: [...selectedTags],\n name: surveyConfig.name,\n };\n\n SurveyService.sendInquiry(conversationId, surveyConfig._id, formatedData)\n .then((res) => {\n dispatch(nextPage(END));\n })\n .catch((err) => {\n console.log(err.response.data.message);\n });\n }\n };\n\n const handleMessageChange = (event) => {\n setObservation(event.target.value);\n };\n\n return (\n \n \n \n \n\n \n \n {surveyConfig.question}
\n \n\n \n\n \n {optionTags && optionTags.length > 0 && {questionTag}
}\n \n \n {optionTags && (\n \n )}\n
\n\n \n Deseja adicionar algum comentário?
\n \n \n \n Enviar\n \n \n \n );\n};\n\nexport default SurveyRating;\n","import styled from 'styled-components';\n\nexport const Container = styled.div`\n display: flex;\n flex-direction: column;\n justify-content: center;\n height: calc(465px - 42px);\n width: 100%;\n`;","import React, { useState, useEffect } from \"react\";\nimport { useSelector, useDispatch } from \"react-redux\";\n//import ChatRating from \"./components/ChatRating\";\nimport SurveyRating from \"./components/SurveyRating\";\nimport { nextPage } from \"../../store/page/actions\";\nimport { Container } from \"./style\";\n\nconst END = \"End\";\n\nconst CustumerExperienceSurvey = () => {\n const config = useSelector((state) => state.config);\n const survey = useSelector((state) => state.survey);\n const [surveyConfig, setSurveyConfig] = useState();\n const dispatch = useDispatch();\n\n if (survey.active === false) {\n dispatch(nextPage(END));\n }\n\n useEffect(() => {\n setSurveyConfig({\n survey: { ...survey.survey },\n conversationId: survey.conversationId,\n active: survey.active,\n });\n }, [survey, dispatch]);\n\n return (\n \n {surveyConfig && surveyConfig.active === true && (\n <>\n \n \n )}\n \n );\n};\n\nexport default CustumerExperienceSurvey;\n","import styled from \"styled-components\";\n\nexport const G4ContainerEnd = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n height: calc(465px - 42px);\n\n p {\n width: 90%;\n margin-top: 20px;\n font-size: 18px;\n font-family: \"Roboto\", sans-serif;\n }\n`;\n\nexport const G4EndImgDiv = styled.div`\n text-align: center;\n justify-content: center;\n display: flex;\n vertical-align: middle;\n width: 100%;\n height: 200px;\n`;\n\nexport const G4EndImg = styled.div`\n width: 200px;\n height: 170px;\n background: url(${props => props.src});\n background-position: 50% 50%;\n background-repeat: no-repeat;\n background-size: contain;\n`;\n\nexport const G4FooterEnd = styled.div`\n height: 42px;\n width: 100%;\n position: absolute;\n bottom: 0px;\n border-radius: 0px 0px 10px 10px;\n\n ${(props) => props.color && `background: ${props.color};`}\n`;\n","import React, { useEffect, useState } from \"react\";\nimport { useSelector } from \"react-redux\";\nimport \"./components/End.css\";\nimport { getLogoChatURL } from \"../../components/logos\";\nimport {\n G4ContainerEnd,\n G4EndImgDiv,\n G4EndImg,\n G4FooterEnd,\n} from \"./components/styled\";\n\nconst End = () => {\n const config = useSelector((state) => state.config);\n const [logoURL, setLogoURL] = useState(null);\n\n useEffect(() => {\n getLogoChatURL()\n .then((source) => {\n setLogoURL(source);\n })\n .catch(() => console.error(\"[LOGIN FORM] Error loading chat logo\"));\n }, []);\n\n return (\n \n \n \n \n\n \n Obrigado por entrar em contato conosco, estaremos sempre à disposição!\n 😀\n
\n \n \n );\n};\n\nexport default End;\n","import { apiHttpNotOpen } from \"./api-http\";\n\nimport store from \"../store\";\nimport { addConfig } from \"../store/config/actions\";\n\napiHttpNotOpen\n .get(\"api/open/configurations/webchat\")\n .then((response) => {\n // const color = 'true';\n const useBot = response.data.data.ativado;\n const botName = response.data.data.nome_atendente;\n const color = response.data.data.cor || \"#2C984A\";\n // const useBot = false;\n\n store.dispatch(addConfig(color, useBot, botName));\n })\n .catch((err) => {\n console.log(err);\n });\n","export function addConfig(color, useBot, botName) {\n return {\n type: '@config/ADD_CONFIG',\n payload: {\n color,\n useBot,\n botName\n }\n };\n}","import React, { useEffect, useState, useContext } from \"react\";\nimport { useSelector } from \"react-redux\";\nimport \"./App.css\";\nimport \"./App.scss\";\nimport { G4Container, G4FullWindow, G4LogoOpen, Switch } from \"./components/styled\";\nimport \"./config/ReactotronConfig\";\nimport Header from \"./components/header/Header\";\nimport Login from \"./pages/login/Login\";\nimport Queue from \"./pages/queue/Queue\";\nimport Wait from \"./pages/wait/Wait\";\nimport Conversation from \"./pages/conversation/Conversation\";\nimport CustumerExperienceSurvey from \"./pages/customer-experience-survey/CustumerExperienceSurvey\";\nimport End from \"./pages/end/End\";\nimport { FaComments } from \"react-icons/fa\";\n\nimport { WebchatContext } from \"./context/WebchatContext\"; \n\nimport \"./services/get-config-chat\";\nimport { subscribe } from \"./util/events\";\nimport { G4LoginImg, G4LoginImgDiv } from \"./pages/login/components/styled\";\nimport { getLogoChatURL } from \"./components/logos\";\n\nconst LOGIN = \"Login\";\nconst QUEUE = \"Queue\";\nconst WAIT = \"Wait\";\nconst CONVERSATION = \"Conversation\";\nconst CUSTOMER_EXPERIENCE = \"CustomerExperience\";\nconst END = \"End\";\n\nconst App = () => {\n const page = useSelector((state) => state.page);\n const config = useSelector((state) => state.config);\n const [chatOpen, setChatOpen] = useState(true);\n const [logoURL, setLogoURL] = useState(null);\n const { modeWebchatFull } = useContext(WebchatContext)\n \n subscribe(\"openWebChat\", () => openChat());\n\n function openChat() {\n setChatOpen(true);\n }\n\n function minimize(value) {\n setChatOpen(value);\n }\n\n useEffect(() => {\n getLogoChatURL()\n .then((source) => {\n setLogoURL(source);\n })\n .catch(() => console.error(\"[LOGIN FORM] Error loading chat logo\"));\n }, []);\n\n return ( \n <>\n {/* \n \n \n */}\n {modeWebchatFull ? (\n \n \n \n \n \n \n \n {page === LOGIN ? : \"\"}\n {page === QUEUE ? : \"\"}\n {page === WAIT ? : \"\"}\n {page === CONVERSATION ? (\n \n ) : (\n \"\"\n )}\n {page === CUSTOMER_EXPERIENCE ? : \"\"}\n {page === END ? : \"\"}\n \n \n ) : (\n \n {!chatOpen && config.color !== \"\" && (\n {\n openChat();\n }}\n >\n {\n openChat();\n }}\n size=\"40\"\n color=\"#fff\"\n />\n \n )}\n\n \n \n {page === LOGIN ? : \"\"}\n {page === QUEUE ? : \"\"}\n {page === WAIT ? : \"\"}\n {page === CONVERSATION ? (\n \n ) : (\n \"\"\n )}\n {page === CUSTOMER_EXPERIENCE ? : \"\"}\n {page === END ? : \"\"}\n \n
\n )}\n \n )\n};\n\nexport default App;\n","function subscribe(eventName, listener) {\n document.addEventListener(eventName, listener);\n}\n\nexport {subscribe};","import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Router } from \"react-router-dom\";\nimport App from \"./App\";\nimport { Provider } from \"react-redux\";\nimport store from \"./store\";\nimport { BrowserRouter } from \"react-router-dom\";\nimport { WebchatContextProvider, } from \"./context/WebchatContext\";\n\nReactDOM.render(\n \n \n \n \n \n \n ,\n document.getElementById(\"chat-g4\")\n);\n"],"sourceRoot":""}