diff --git a/frontend/package.json b/frontend/package.json index 566580cb..3233673d 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -34,11 +34,13 @@ "react-copy-to-clipboard": "^5.1.0", "react-csv": "^2.2.2", "react-dom": "^16.13.1", + "react-i18next": "^10.11.0", "react-modal-image": "^2.5.0", "react-router-dom": "^5.2.0", "react-scripts": "3.4.3", "react-tagcloud": "^2.3.3", "react-toastify": "^6.0.9", + "react-world-flags": "^1.6.0", "recharts": "^2.13.0", "socket.io-client": "^3.0.5", "use-sound": "^2.0.1", @@ -59,4 +61,4 @@ "last 1 safari version" ] } -} \ No newline at end of file +} diff --git a/frontend/src/components/AcceptTicketWithoutQueueModal/index.js b/frontend/src/components/AcceptTicketWithoutQueueModal/index.js index 414fb3b2..b8d0fe71 100644 --- a/frontend/src/components/AcceptTicketWithoutQueueModal/index.js +++ b/frontend/src/components/AcceptTicketWithoutQueueModal/index.js @@ -12,11 +12,11 @@ import { } from "@material-ui/core"; import PropTypes from "prop-types"; import React, { useCallback, useContext, useState } from "react"; +import { useTranslation } from "react-i18next"; import { useHistory } from "react-router-dom"; import { AuthContext } from "../../context/Auth/AuthContext"; import toastError from "../../errors/toastError"; import api from "../../services/api"; -import { i18n } from "../../translate/i18n"; import ButtonWithSpinner from "../ButtonWithSpinner"; const useStyles = makeStyles((theme) => ({ @@ -40,7 +40,7 @@ const AcceptTicketWithouSelectQueue = ({ modalOpen, onClose, ticketId }) => { const [selectedQueue, setSelectedQueue] = useState(INITIAL_QUEUE_VALUE); const [loading, setLoading] = useState(false); const { user } = useContext(AuthContext); - + const { t } = useTranslation(); const userId = user?.id; const handleClose = useCallback(() => { @@ -74,16 +74,16 @@ const AcceptTicketWithouSelectQueue = ({ modalOpen, onClose, ticketId }) => { aria-describedby="accept-ticket-dialog-description" > - {i18n.t("ticketsList.acceptModal.title")} + {t("ticketsList.acceptModal.title")} - {i18n.t("ticketsList.acceptModal.queue")} + {t("ticketsList.acceptModal.queue")} setSelectedQueue(e.target.value)} - label={i18n.t("ticketsList.acceptModal.queue")} + label={t("ticketsList.acceptModal.queue")} >   {user.queues.map((queue) => ( @@ -242,7 +236,7 @@ const NewTicketModal = ({ modalOpen, onClose }) => { disabled={loading} variant="outlined" > - {i18n.t("newTicketModal.buttons.cancel")} + {t("newTicketModal.buttons.cancel")} { color="primary" loading={loading} > - {i18n.t("newTicketModal.buttons.ok")} + {t("newTicketModal.buttons.ok")} diff --git a/frontend/src/components/NewTicketModalPageContact/index.js b/frontend/src/components/NewTicketModalPageContact/index.js index 4f0d89f2..cf649eef 100644 --- a/frontend/src/components/NewTicketModalPageContact/index.js +++ b/frontend/src/components/NewTicketModalPageContact/index.js @@ -1,38 +1,34 @@ -import React, { useState, useEffect, useContext } from "react"; - import { - Button, - CircularProgress, - Dialog, - DialogActions, - DialogContent, - DialogTitle, - Grid, - ListItemText, - MenuItem, - Select, - TextField + Button, + CircularProgress, + Dialog, + DialogActions, + DialogContent, + DialogTitle, + Grid, + ListItemText, + MenuItem, + Select, + TextField } from "@material-ui/core"; - import Autocomplete, { createFilterOptions, } from "@material-ui/lab/Autocomplete"; - +import React, { useContext, useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { toast } from "react-toastify"; +import { AuthContext } from "../../context/Auth/AuthContext"; +import toastError from "../../errors/toastError"; +import api from "../../services/api"; import ButtonWithSpinner from "../ButtonWithSpinner"; import ContactModal from "../ContactModal"; -import { i18n } from "../../translate/i18n"; -import api from "../../services/api"; -import toastError from "../../errors/toastError"; -import { AuthContext } from "../../context/Auth/AuthContext"; -import { toast } from "react-toastify"; - const filter = createFilterOptions({ trim: true, }); const NewTicketModalPageContact = ({ modalOpen, onClose, initialContact }) => { - + const { t } = useTranslation(); const [options, setOptions] = useState([]); const [loading, setLoading] = useState(false); const [searchParam, setSearchParam] = useState(""); @@ -83,7 +79,7 @@ const NewTicketModalPageContact = ({ modalOpen, onClose, initialContact }) => { const handleSaveTicket = async contactId => { if (!contactId) return; if (selectedQueue === "" && user.profile !== 'admin') { - toast.error(i18n.t("newTicketModalContactPage.queue")); + toast.error(t("newTicketModalContactPage.queue")); return; } setLoading(true); @@ -135,7 +131,7 @@ const NewTicketModalPageContact = ({ modalOpen, onClose, initialContact }) => { if (option.number) { return `${option.name} - ${option.number}`; } else { - return `${i18n.t("newTicketModalContactPage.add")} ${option.name}`; + return `${t("newTicketModalContactPage.add")} ${option.name}`; } }; @@ -166,7 +162,7 @@ const NewTicketModalPageContact = ({ modalOpen, onClose, initialContact }) => { renderInput={params => ( setSearchParam(e.target.value)} @@ -206,7 +202,7 @@ const NewTicketModalPageContact = ({ modalOpen, onClose, initialContact }) => { > - {i18n.t("newTicketModal.title")} + {t("newTicketModal.title")} @@ -256,7 +252,7 @@ const NewTicketModalPageContact = ({ modalOpen, onClose, initialContact }) => { disabled={loading} variant="outlined" > - {i18n.t("newTicketModal.buttons.cancel")} + {t("newTicketModal.buttons.cancel")} { color="primary" loading={loading} > - {i18n.t("newTicketModal.buttons.ok")} + {t("newTicketModal.buttons.ok")} diff --git a/frontend/src/components/NotificationsPopOver/index.js b/frontend/src/components/NotificationsPopOver/index.js index 66233957..f04c57dd 100644 --- a/frontend/src/components/NotificationsPopOver/index.js +++ b/frontend/src/components/NotificationsPopOver/index.js @@ -14,6 +14,7 @@ import VolumeOffIcon from "@material-ui/icons/VolumeOff"; import VolumeUpIcon from "@material-ui/icons/VolumeUp"; import { format } from "date-fns"; import React, { useCallback, useContext, useEffect, useRef, useState } from "react"; +import { useTranslation } from "react-i18next"; import { useHistory } from "react-router-dom"; import { toast } from "react-toastify"; import useSound from "use-sound"; @@ -21,7 +22,6 @@ import alertSound from "../../assets/sound.mp3"; import { AuthContext } from "../../context/Auth/AuthContext"; import useTickets from "../../hooks/useTickets"; import openSocket from "../../services/socket-io"; -import { i18n } from "../../translate/i18n"; import TicketListItem from "../TicketListItem"; const useStyles = makeStyles((theme) => ({ @@ -43,7 +43,7 @@ const useStyles = makeStyles((theme) => ({ const NotificationsPopOver = () => { const classes = useStyles(); - + const { t } = useTranslation(); const history = useHistory(); const { user } = useContext(AuthContext); const ticketIdUrl = +history.location.pathname.split("/")[2]; @@ -72,7 +72,7 @@ const NotificationsPopOver = () => { const requestNotificationPermission = () => { // Verifica se o navegador suporta notificações if (!("Notification" in window)) { - alert(i18n.t("notifications.unsupported")); // Notificações não suportadas + alert(t("notifications.unsupported")); // Notificações não suportadas return; } @@ -81,14 +81,14 @@ const NotificationsPopOver = () => { .then((permission) => { if (permission === "granted") { setNotificationsAllowed(true); - toast.success(i18n.t("notifications.permissionGranted")); + toast.success(t("notifications.permissionGranted")); } else if (permission === "denied") { - toast.error(i18n.t("notifications.permissionDenied")); + toast.error(t("notifications.permissionDenied")); } }) .catch((error) => { console.error("Erro ao solicitar permissão para notificações:", error); - toast.error(i18n.t("notifications.error")); + toast.error(t("notifications.error")); }); }; @@ -107,7 +107,7 @@ const NotificationsPopOver = () => { }; const notification = new Notification( - `${i18n.t("tickets.notification.message")} ${contact.name}`, + `${t("tickets.notification.message")} ${contact.name}`, options ); @@ -121,9 +121,10 @@ const NotificationsPopOver = () => { soundAlertRef.current(); } }, - [isAudioEnabled, history, notificationsAllowed] + [isAudioEnabled, history, notificationsAllowed, t] ); + useEffect(() => { const socket = openSocket(); @@ -198,7 +199,7 @@ const NotificationsPopOver = () => { color="inherit" variant="contained" > - + @@ -236,7 +237,7 @@ const NotificationsPopOver = () => { {notifications.length === 0 ? ( - {i18n.t("notifications.noTickets")} + {t("notifications.noTickets")} ) : ( notifications.map((ticket) => ( diff --git a/frontend/src/components/QrcodeModal/index.js b/frontend/src/components/QrcodeModal/index.js index fe4a1495..22396a88 100644 --- a/frontend/src/components/QrcodeModal/index.js +++ b/frontend/src/components/QrcodeModal/index.js @@ -1,14 +1,14 @@ -import React, { useEffect, useState } from "react"; +import { Dialog, DialogContent, Paper, Typography } from "@material-ui/core"; import QRCode from "qrcode.react"; -import openSocket from "../../services/socket-io"; +import React, { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; import toastError from "../../errors/toastError"; - -import { Dialog, DialogContent, Paper, Typography } from "@material-ui/core"; -import { i18n } from "../../translate/i18n"; import api from "../../services/api"; +import openSocket from "../../services/socket-io"; const QrcodeModal = ({ open, onClose, whatsAppId }) => { const [qrCode, setQrCode] = useState(""); + const { t } = useTranslation(); useEffect(() => { const fetchSession = async () => { @@ -45,10 +45,10 @@ const QrcodeModal = ({ open, onClose, whatsAppId }) => { return ( - - + + - {i18n.t("qrCode.message")} + {t("qrCode.message")} {qrCode ? ( diff --git a/frontend/src/components/QueueModal/index.js b/frontend/src/components/QueueModal/index.js index 0b594e9c..0265307c 100644 --- a/frontend/src/components/QueueModal/index.js +++ b/frontend/src/components/QueueModal/index.js @@ -16,11 +16,11 @@ import { useTheme } from "@material-ui/core/styles"; import { Colorize } from "@material-ui/icons"; import { Field, Form, Formik } from "formik"; import React, { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; import { toast } from "react-toastify"; import * as Yup from "yup"; import toastError from "../../errors/toastError"; import api from "../../services/api"; -import { i18n } from "../../translate/i18n"; import ColorPicker from "../ColorPicker"; const useStyles = makeStyles((theme) => ({ @@ -53,21 +53,22 @@ const useStyles = makeStyles((theme) => ({ }, })); -const QueueSchema = Yup.object().shape({ - name: Yup.string() - .min(2, i18n.t("queueModal.validation.tooShort")) - .max(50, i18n.t("queueModal.validation.tooLong")) - .required(i18n.t("queueModal.validation.required")), - color: Yup.string().min(3, i18n.t("queueModal.validation.tooShort")).max(9, i18n.t("queueModal.validation.tooLong")).required(), - greetingMessage: Yup.string(), - startWork: Yup.string(), - endWork: Yup.string(), - absenceMessage: Yup.string(), -}); - const QueueModal = ({ open, onClose, queueId }) => { const classes = useStyles(); const theme = useTheme(); + const { t } = useTranslation(); + + const QueueSchema = Yup.object().shape({ + name: Yup.string() + .min(2, t("queueModal.validation.tooShort")) + .max(50, t("queueModal.validation.tooLong")) + .required(t("queueModal.validation.required")), + color: Yup.string().min(3, t("queueModal.validation.tooShort")).max(9, t("queueModal.validation.tooLong")).required(), + greetingMessage: Yup.string(), + startWork: Yup.string(), + endWork: Yup.string(), + absenceMessage: Yup.string(), + }); const initialState = { name: "", @@ -112,7 +113,7 @@ const QueueModal = ({ open, onClose, queueId }) => { } else { await api.post("/queue", values); } - toast.success(i18n.t("queueModal.notification.title")); + toast.success(t("queueModal.notification.title")); handleClose(); } catch (err) { toastError(err); @@ -123,7 +124,7 @@ const QueueModal = ({ open, onClose, queueId }) => {
- {queueId ? i18n.t("queueModal.title.edit") : i18n.t("queueModal.title.add")} + {queueId ? t("queueModal.title.edit") : t("queueModal.title.add")} { { setColorPickerModalOpen(true)} @@ -195,7 +196,7 @@ const QueueModal = ({ open, onClose, queueId }) => { { { { { disabled={isSubmitting} variant="outlined" > - {i18n.t("queueModal.buttons.cancel")} + {t("queueModal.buttons.cancel")} ( { + const { t } = useTranslation(); + const handleChange = e => { onChange(e.target.value); }; @@ -35,7 +36,7 @@ const TicketsQueueSelect = ({ }, getContentAnchorEl: null, }} - renderValue={() => i18n.t("ticketsQueueSelect.placeholder")} + renderValue={() => t("ticketsQueueSelect.placeholder")} > {userQueues?.length > 0 && userQueues.map(queue => ( diff --git a/frontend/src/components/TransferTicketModal/index.js b/frontend/src/components/TransferTicketModal/index.js index cc6e80a5..eee26e0d 100644 --- a/frontend/src/components/TransferTicketModal/index.js +++ b/frontend/src/components/TransferTicketModal/index.js @@ -1,36 +1,33 @@ -import React, { useState, useEffect, useContext } from "react"; -import { useHistory } from "react-router-dom"; - +import { makeStyles } from "@material-ui/core"; import Button from "@material-ui/core/Button"; -import TextField from "@material-ui/core/TextField"; +import CircularProgress from "@material-ui/core/CircularProgress"; import Dialog from "@material-ui/core/Dialog"; -import Select from "@material-ui/core/Select"; -import FormControl from "@material-ui/core/FormControl"; -import InputLabel from "@material-ui/core/InputLabel"; -import MenuItem from "@material-ui/core/MenuItem"; -import { makeStyles } from "@material-ui/core"; - import DialogActions from "@material-ui/core/DialogActions"; import DialogContent from "@material-ui/core/DialogContent"; import DialogTitle from "@material-ui/core/DialogTitle"; +import FormControl from "@material-ui/core/FormControl"; +import InputLabel from "@material-ui/core/InputLabel"; +import MenuItem from "@material-ui/core/MenuItem"; +import Select from "@material-ui/core/Select"; +import TextField from "@material-ui/core/TextField"; import Autocomplete, { createFilterOptions, } from "@material-ui/lab/Autocomplete"; -import CircularProgress from "@material-ui/core/CircularProgress"; - -import { i18n } from "../../translate/i18n"; -import api from "../../services/api"; -import ButtonWithSpinner from "../ButtonWithSpinner"; +import React, { useContext, useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { useHistory } from "react-router-dom"; +import { AuthContext } from "../../context/Auth/AuthContext"; import toastError from "../../errors/toastError"; import useQueues from "../../hooks/useQueues"; import useWhatsApps from "../../hooks/useWhatsApps"; -import { AuthContext } from "../../context/Auth/AuthContext"; +import api from "../../services/api"; +import ButtonWithSpinner from "../ButtonWithSpinner"; import { Can } from "../Can"; const useStyles = makeStyles((theme) => ({ - maxWidth: { - width: "100%", - }, + maxWidth: { + width: "100%", + }, })); const filterOptions = createFilterOptions({ @@ -39,6 +36,7 @@ const filterOptions = createFilterOptions({ const TransferTicketModal = ({ modalOpen, onClose, ticketid, ticketWhatsappId }) => { const history = useHistory(); + const { t } = useTranslation(); const [options, setOptions] = useState([]); const [queues, setQueues] = useState([]); const [allQueues, setAllQueues] = useState([]); @@ -115,7 +113,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid, ticketWhatsappId }) } } - if(selectedWhatsapp) { + if (selectedWhatsapp) { data.whatsappId = selectedWhatsapp; } @@ -133,7 +131,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid, ticketWhatsappId })
- {i18n.t("transferTicketModal.title")} + {t("transferTicketModal.title")} ( - {i18n.t("transferTicketModal.fieldQueueLabel")} + {t("transferTicketModal.fieldQueueLabel")} setSelectedWhatsapp(e.target.value)} - label={i18n.t("transferTicketModal.fieldConnectionPlaceholder")} + label={t("transferTicketModal.fieldConnectionPlaceholder")} > {whatsApps.map((whasapp) => ( {whasapp.name} @@ -215,7 +213,7 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid, ticketWhatsappId }) disabled={loading} variant="outlined" > - {i18n.t("transferTicketModal.buttons.cancel")} + {t("transferTicketModal.buttons.cancel")} - {i18n.t("transferTicketModal.buttons.ok")} + {t("transferTicketModal.buttons.ok")} diff --git a/frontend/src/components/UserModal/index.js b/frontend/src/components/UserModal/index.js index ec5e6ed4..1a6968ed 100644 --- a/frontend/src/components/UserModal/index.js +++ b/frontend/src/components/UserModal/index.js @@ -1,45 +1,40 @@ -import React, { useState, useEffect, useContext, useRef } from "react"; -import { useHistory } from "react-router-dom"; -import * as Yup from "yup"; -import { - Formik, - Form, - Field -} from "formik"; -import { toast } from "react-toastify"; - import { Button, + CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, - CircularProgress, - Select, + FormControl, + IconButton, + InputAdornment, InputLabel, makeStyles, MenuItem, - FormControl, - TextField, - InputAdornment, - IconButton + Select, + TextField } from '@material-ui/core'; - +import { green } from "@material-ui/core/colors"; import { Visibility, VisibilityOff } from '@material-ui/icons'; - -import { green } from "@material-ui/core/colors"; - -import { i18n } from "../../translate/i18n"; - -import api from "../../services/api"; -import toastError from "../../errors/toastError"; -import QueueSelect from "../QueueSelect"; +import { + Field, + Form, + Formik +} from "formik"; +import React, { useContext, useEffect, useRef, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { useHistory } from "react-router-dom"; +import { toast } from "react-toastify"; +import * as Yup from "yup"; import { AuthContext } from "../../context/Auth/AuthContext"; -import { Can } from "../Can"; +import toastError from "../../errors/toastError"; import useWhatsApps from "../../hooks/useWhatsApps"; +import api from "../../services/api"; +import { Can } from "../Can"; +import QueueSelect from "../QueueSelect"; const useStyles = makeStyles(theme => ({ root: { @@ -89,7 +84,7 @@ const UserSchema = Yup.object().shape({ const UserModal = ({ open, onClose, userId }) => { const classes = useStyles(); - + const { t } = useTranslation(); const initialState = { name: "", email: "", @@ -143,7 +138,7 @@ const UserModal = ({ open, onClose, userId }) => { } else { await api.post("/users", userData); } - toast.success(i18n.t("userModal.success")); + toast.success(t("userModal.success")); history.go(0); } catch (err) { toastError(err); @@ -162,8 +157,8 @@ const UserModal = ({ open, onClose, userId }) => { > {userId - ? `${i18n.t("userModal.title.edit")}` - : `${i18n.t("userModal.title.add")}`} + ? `${t("userModal.title.edit")}` + : `${t("userModal.title.add")}`} {
{ name="password" variant="outlined" margin="dense" - label={i18n.t("userModal.form.password")} + label={t("userModal.form.password")} error={touched.password && Boolean(errors.password)} helperText={touched.password && errors.password} type={showPassword ? 'text' : 'password'} @@ -218,7 +213,7 @@ const UserModal = ({ open, onClose, userId }) => {
{ yes={() => ( <> - {i18n.t("userModal.form.profile")} + {t("userModal.form.profile")} - {i18n.t("userModal.form.admin")} - {i18n.t("userModal.form.user")} + {t("userModal.form.admin")} + {t("userModal.form.user")} )} @@ -271,12 +266,12 @@ const UserModal = ({ open, onClose, userId }) => { perform="user-modal:editQueues" yes={() => (!loading && - {i18n.t("userModal.form.whatsapp")} + {t("userModal.form.whatsapp")} setWhatsappId(e.target.value)} - label={i18n.t("userModal.form.whatsapp")} + label={t("userModal.form.whatsapp")} >   {whatsApps.map((whatsapp) => ( @@ -293,7 +288,7 @@ const UserModal = ({ open, onClose, userId }) => {
{ /> { yes={() => ( <> - {i18n.t("userModal.form.isTricked")} + {t("userModal.form.isTricked")} - {i18n.t("userModal.form.enabled")} - {i18n.t("userModal.form.disabled")} + {t("userModal.form.enabled")} + {t("userModal.form.disabled")} )} @@ -380,7 +375,7 @@ const UserModal = ({ open, onClose, userId }) => { disabled={isSubmitting} variant="outlined" > - {i18n.t("userModal.buttons.cancel")} + {t("userModal.buttons.cancel")} - + - + { perform="drawer-admin-items:view" yes={() => ( <> - +
- {i18n.t("dashboard.messages.closed.title")} + {t("dashboard.messages.closed.title")} diff --git a/frontend/src/pages/Integrations/index.js b/frontend/src/pages/Integrations/index.js index 3a3ca67d..4ee34b10 100644 --- a/frontend/src/pages/Integrations/index.js +++ b/frontend/src/pages/Integrations/index.js @@ -9,11 +9,11 @@ import { } from "@material-ui/core"; import { Visibility, VisibilityOff } from "@material-ui/icons"; import React, { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; import { toast } from "react-toastify"; import Title from "../../components/Title"; import toastError from "../../errors/toastError"; import api from "../../services/api"; -import { i18n } from "../../translate/i18n.js"; const useStyles = makeStyles((theme) => ({ root: { @@ -48,6 +48,7 @@ const useStyles = makeStyles((theme) => ({ const Integrations = () => { const classes = useStyles(); + const { t } = useTranslation(); const [integrations, setIntegrations] = useState([]); const [showKeys, setShowKeys] = useState({ @@ -91,7 +92,7 @@ const Integrations = () => { await api.put(`/integrations/${integrationKey}`, { value: selectedValue, }); - toast.success(i18n.t("integrations.success")); + toast.success(t("integrations.success")); setMaskedValues((prevState) => ({ ...prevState, [integrationKey]: maskValue(selectedValue), @@ -120,11 +121,11 @@ const Integrations = () => { return (
- {i18n.t("integrations.title")} + {t("integrations.title")}
- {i18n.t("integrations.integrations.openai.title")} + {t("integrations.integrations.openai.title")}
@@ -133,7 +134,7 @@ const Integrations = () => { id="organization" name="organization" margin="dense" - label={i18n.t("integrations.integrations.openai.organization")} + label={t("integrations.integrations.openai.organization")} variant="outlined" value={ showKeys["organization"] @@ -157,7 +158,7 @@ const Integrations = () => { className={classes.textField} id="apikey" name="apikey" - label={i18n.t("integrations.integrations.openai.apikey")} + label={t("integrations.integrations.openai.apikey")} margin="dense" variant="outlined" onChange={handleChangeIntegration} @@ -184,7 +185,7 @@ const Integrations = () => {
- {i18n.t("integrations.integrations.n8n.title")} + {t("integrations.integrations.n8n.title")}
@@ -193,7 +194,7 @@ const Integrations = () => { id="urlApiN8N" name="urlApiN8N" margin="dense" - label={i18n.t("integrations.integrations.n8n.urlApiN8N")} + label={t("integrations.integrations.n8n.urlApiN8N")} variant="outlined" onChange={handleChangeIntegration} fullWidth @@ -217,7 +218,7 @@ const Integrations = () => {
- {i18n.t("integrations.integrations.hub.title")} + {t("integrations.integrations.hub.title")}
@@ -226,7 +227,7 @@ const Integrations = () => { id="hubToken" name="hubToken" margin="dense" - label={i18n.t("integrations.integrations.hub.hubToken")} + label={t("integrations.integrations.hub.hubToken")} variant="outlined" onChange={handleChangeIntegration} fullWidth @@ -254,7 +255,7 @@ const Integrations = () => {
- {i18n.t("integrations.integrations.maps.title")} + {t("integrations.integrations.maps.title")}
@@ -263,7 +264,7 @@ const Integrations = () => { id="apiMaps" name="apiMaps" margin="dense" - label={i18n.t("integrations.integrations.maps.apiMaps")} + label={t("integrations.integrations.maps.apiMaps")} variant="outlined" onChange={handleChangeIntegration} fullWidth diff --git a/frontend/src/pages/Login/index.js b/frontend/src/pages/Login/index.js index 3a0e7864..8b9be1bf 100644 --- a/frontend/src/pages/Login/index.js +++ b/frontend/src/pages/Login/index.js @@ -16,11 +16,11 @@ import { import { makeStyles } from "@material-ui/core/styles"; import { Visibility, VisibilityOff } from '@material-ui/icons'; +import { useTranslation } from "react-i18next"; import defaultLogo from '../../assets/logo.jpg'; import { AuthContext } from "../../context/Auth/AuthContext"; import toastError from "../../errors/toastError"; import api from "../../services/api"; -import { i18n } from "../../translate/i18n"; const PUBLIC_ASSET_PATH = '/assets/'; @@ -55,7 +55,7 @@ const useStyles = makeStyles((theme) => ({ const Login = () => { const classes = useStyles(); - + const { t } = useTranslation(); const [user, setUser] = useState({ email: "", password: "" }); const [showPassword, setShowPassword] = useState(false); const { handleLogin } = useContext(AuthContext); @@ -144,7 +144,7 @@ const Login = () => {
logo - {i18n.t("login.title")} + {t("login.title")} { required fullWidth id="email" - label={i18n.t("login.form.email")} + label={t("login.form.email")} name="email" value={user.email} onChange={handleChangeInput} @@ -166,7 +166,7 @@ const Login = () => { required fullWidth name="password" - label={i18n.t("login.form.password")} + label={t("login.form.password")} id="password" value={user.password} onChange={handleChangeInput} @@ -192,7 +192,7 @@ const Login = () => { color="primary" className={classes.submit} > - {i18n.t("login.buttons.submit")} + {t("login.buttons.submit")} @@ -202,7 +202,7 @@ const Login = () => { component={RouterLink} to="/signup" > - {i18n.t("login.buttons.register")} + {t("login.buttons.register")} diff --git a/frontend/src/pages/Queues/index.js b/frontend/src/pages/Queues/index.js index b1145a7c..2773a71b 100644 --- a/frontend/src/pages/Queues/index.js +++ b/frontend/src/pages/Queues/index.js @@ -17,6 +17,7 @@ import { Edit } from "@material-ui/icons"; import React, { useEffect, useReducer, useState } from "react"; +import { useTranslation } from "react-i18next"; import { toast } from "react-toastify"; import ConfirmationModal from "../../components/ConfirmationModal"; import MainContainer from "../../components/MainContainer"; @@ -28,7 +29,6 @@ import Title from "../../components/Title"; import toastError from "../../errors/toastError"; import api from "../../services/api"; import openSocket from "../../services/socket-io"; -import { i18n } from "../../translate/i18n"; const useStyles = makeStyles((theme) => ({ mainPaper: { @@ -90,7 +90,7 @@ const reducer = (state, action) => { const Queues = () => { const classes = useStyles(); - + const { t } = useTranslation(); const [queues, dispatch] = useReducer(reducer, []); const [loading, setLoading] = useState(false); @@ -154,7 +154,7 @@ const Queues = () => { const handleDeleteQueue = async (queueId) => { try { await api.delete(`/queue/${queueId}`); - toast.success(i18n.t("queues.notifications.queueDeleted")); + toast.success(t("queues.notifications.queueDeleted")); } catch (err) { toastError(err); } @@ -166,14 +166,14 @@ const Queues = () => { handleDeleteQueue(selectedQueue.id)} > - {i18n.t("queues.confirmationModal.deleteMessage")} + {t("queues.confirmationModal.deleteMessage")} { queueId={selectedQueue?.id} /> - {i18n.t("queues.title")} ({queues.length}) + {t("queues.title")} ({queues.length}) - +
@@ -334,7 +336,7 @@ const PersonalizeSettings = ({ onThemeConfigUpdate }) => {
- Theme Light + {t("settings.personalize.tabpanel.light")} {Object.keys(logos.themeLight).map((key) => ( @@ -373,7 +375,7 @@ const PersonalizeSettings = ({ onThemeConfigUpdate }) => { - Theme Dark + {t("settings.personalize.tabpanel.dark")} {Object.keys(logos.themeDark).map((key) => ( @@ -417,20 +419,20 @@ const PersonalizeSettings = ({ onThemeConfigUpdate }) => {
- Theme Light + {t("settings.personalize.tabpanel.light")}
{ { { {
- Theme Dark + {t("settings.personalize.tabpanel.dark")}
{ { { ({ const Settings = ({ onThemeConfigUpdate }) => { const classes = useStyles(); - const history = useHistory(); + const { t } = useTranslation(); const [settings, setSettings] = useState([]); const [tabValue, setTabValue] = useState(0); const { user } = useContext(AuthContext); @@ -88,8 +87,7 @@ const Settings = ({ onThemeConfigUpdate }) => { await api.put(`/settings/${settingKey}`, { value: selectedValue, }); - toast.success("Configuração atualizada com sucesso"); - history.go(0); + toast.success(t("settings.success")); } catch (err) { toastError(err); } @@ -103,7 +101,7 @@ const Settings = ({ onThemeConfigUpdate }) => { await api.put(`/settings/${settingKey}`, { value: selectedValue, }); - toast.success(i18n.t("settings.success")); + toast.success(t("settings.success")); } catch (err) { toastError(err); } @@ -128,9 +126,9 @@ const Settings = ({ onThemeConfigUpdate }) => { className={classes.tabs} > {(!isMasterAdminEnabled || user.profile === "masteradmin") && ( - + )} - + {tabValue === 0 && (!isMasterAdminEnabled || user.profile === "masteradmin") && ( diff --git a/frontend/src/pages/Signup/index.js b/frontend/src/pages/Signup/index.js index 5acee9e3..28e38531 100644 --- a/frontend/src/pages/Signup/index.js +++ b/frontend/src/pages/Signup/index.js @@ -1,10 +1,3 @@ -import React, { useEffect, useState } from "react"; - -import { Field, Form, Formik } from "formik"; -import { Link as RouterLink, useHistory } from "react-router-dom"; -import { toast } from "react-toastify"; -import * as Yup from "yup"; - import { Box, Button, @@ -17,13 +10,14 @@ import { TextField, Typography } from '@material-ui/core'; - -import { Visibility, VisibilityOff } from '@material-ui/icons'; - import { makeStyles } from "@material-ui/core/styles"; - -import { i18n } from "../../translate/i18n"; - +import { Visibility, VisibilityOff } from '@material-ui/icons'; +import { Field, Form, Formik } from "formik"; +import React, { useEffect, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { Link as RouterLink, useHistory } from "react-router-dom"; +import { toast } from "react-toastify"; +import * as Yup from "yup"; import defaultLogo from '../../assets/logo.jpg'; import toastError from "../../errors/toastError"; import api from "../../services/api"; @@ -70,6 +64,7 @@ const UserSchema = Yup.object().shape({ const SignUp = () => { const classes = useStyles(); + const { t } = useTranslation(); const history = useHistory(); const initialState = { name: "", email: "", password: "" }; const [showPassword, setShowPassword] = useState(false); @@ -147,7 +142,7 @@ const SignUp = () => { const handleSignUp = async values => { try { await api.post("/auth/signup", values); - toast.success(i18n.t("signup.toasts.success")); + toast.success(t("signup.toasts.success")); history.push("/login"); } catch (err) { toastError(err); @@ -160,7 +155,7 @@ const SignUp = () => {
logo - {i18n.t("signup.title")} + {t("signup.title")} { variant="outlined" fullWidth id="name" - label={i18n.t("signup.form.name")} + label={t("signup.form.name")} autoFocus /> @@ -197,7 +192,7 @@ const SignUp = () => { variant="outlined" fullWidth id="email" - label={i18n.t("signup.form.email")} + label={t("signup.form.email")} name="email" error={touched.email && Boolean(errors.email)} helperText={touched.email && errors.email} @@ -214,7 +209,7 @@ const SignUp = () => { autoComplete="current-password" error={touched.password && Boolean(errors.password)} helperText={touched.password && errors.password} - label={i18n.t("signup.form.password")} + label={t("signup.form.password")} type={showPassword ? 'text' : 'password'} InputProps={{ endAdornment: ( @@ -238,7 +233,7 @@ const SignUp = () => { color="primary" className={classes.submit} > - {i18n.t("signup.buttons.submit")} + {t("signup.buttons.submit")} @@ -248,7 +243,7 @@ const SignUp = () => { component={RouterLink} to="/login" > - {i18n.t("signup.buttons.login")} + {t("signup.buttons.login")} diff --git a/frontend/src/pages/Tags/index.js b/frontend/src/pages/Tags/index.js index 458a0e2b..ec28404b 100644 --- a/frontend/src/pages/Tags/index.js +++ b/frontend/src/pages/Tags/index.js @@ -1,7 +1,3 @@ -import React, { useCallback, useEffect, useReducer, useState } from "react"; -import { toast } from "react-toastify"; -import openSocket from "../../services/socket-io"; - import { Button, IconButton, @@ -16,7 +12,6 @@ import { Tooltip } from "@material-ui/core"; import { makeStyles } from "@material-ui/core/styles"; - import { AddCircleOutline, DeleteForever, @@ -24,18 +19,19 @@ import { Edit, Search } from "@material-ui/icons"; - +import React, { useCallback, useEffect, useReducer, useState } from "react"; +import { useTranslation } from "react-i18next"; +import { toast } from "react-toastify"; +import ConfirmationModal from "../../components/ConfirmationModal"; import MainContainer from "../../components/MainContainer"; import MainHeader from "../../components/MainHeader"; import MainHeaderButtonsWrapper from "../../components/MainHeaderButtonsWrapper"; -import Title from "../../components/Title"; - -import ConfirmationModal from "../../components/ConfirmationModal"; import TableRowSkeleton from "../../components/TableRowSkeleton"; import TagModal from "../../components/TagModal"; +import Title from "../../components/Title"; import toastError from "../../errors/toastError"; import api from "../../services/api"; -import { i18n } from "../../translate/i18n"; +import openSocket from "../../services/socket-io"; const reducer = (state, action) => { if (action.type === "LOAD_TAGS") { @@ -98,7 +94,7 @@ const useStyles = makeStyles((theme) => ({ const Tags = () => { const classes = useStyles(); - + const { t } = useTranslation(); const [loading, setLoading] = useState(false); const [pageNumber, setPageNumber] = useState(1); const [hasMore, setHasMore] = useState(false); @@ -176,7 +172,7 @@ const Tags = () => { const handleDeleteTag = async (tagId) => { try { await api.delete(`/tags/${tagId}`); - toast.success(i18n.t("tags.toasts.deleted")); + toast.success(t("tags.toasts.deleted")); } catch (err) { toastError(err); } @@ -192,7 +188,7 @@ const Tags = () => { const handleDeleteAllTags = async () => { try { await api.delete(`/tags`); - toast.success(i18n.t("tags.toasts.deletedAll")); + toast.success(t("tags.toasts.deletedAll")); } catch (err) { toastError(err); } @@ -221,8 +217,8 @@ const Tags = () => { { } > { - deletingTag ? `${i18n.t("tags.confirmationModal.deleteMessage")}` - : `${i18n.t("tags.confirmationModal.deleteAllMessage")}` + deletingTag ? `${t("tags.confirmationModal.deleteMessage")}` + : `${t("tags.confirmationModal.deleteAllMessage")}` } { tagId={selectedTag && selectedTag.id} /> - {i18n.t("tags.title")} ({tags.length}) + {t("tags.title")} ({tags.length}) { ), }} /> - + - +