✨ In the transfer modal also have the option to transfer to another whatsapp

frontend/src/components/TicketOptionsMenu/index.js

@@ -94,6 +94,7 @@ const TicketOptionsMenu = ({ ticket, menuOpen, handleClose, anchorEl }) => {
 				modalOpen={transferTicketModalOpen}
 				onClose={handleCloseTransferTicketModal}
 				ticketid={ticket.id}
+				ticketWhatsappId={ticket.whatsappId}
 			/>
 		</>
 	);

frontend/src/components/TransferTicketModal/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
 import { useHistory } from "react-router-dom";
 
 import Button from "@material-ui/core/Button";
@@ -23,6 +23,9 @@ import api from "../../services/api";
 import ButtonWithSpinner from "../ButtonWithSpinner";
 import toastError from "../../errors/toastError";
 import useQueues from "../../hooks/useQueues";
+import useWhatsApps from "../../hooks/useWhatsApps";
+import { AuthContext } from "../../context/Auth/AuthContext";
+import { Can } from "../Can";
 
 const useStyles = makeStyles((theme) => ({
   maxWidth: {
@@ -34,7 +37,7 @@ const filterOptions = createFilterOptions({
 	trim: true,
 });
 
-const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
+const TransferTicketModal = ({ modalOpen, onClose, ticketid, ticketWhatsappId }) => {
 	const history = useHistory();
 	const [options, setOptions] = useState([]);
 	const [queues, setQueues] = useState([]);
@@ -43,8 +46,12 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
 	const [searchParam, setSearchParam] = useState("");
 	const [selectedUser, setSelectedUser] = useState(null);
 	const [selectedQueue, setSelectedQueue] = useState('');
+	const [selectedWhatsapp, setSelectedWhatsapp] = useState(ticketWhatsappId);
 	const classes = useStyles();
 	const { findAll: findAllQueues } = useQueues();
+	const { loadingWhatsapps, whatsApps } = useWhatsApps();
+
+	const { user: loggedInUser } = useContext(AuthContext);
 
 	useEffect(() => {
 		const loadQueues = async () => {
@@ -107,6 +114,10 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
 				}
 			}
 
+			if(selectedWhatsapp) {
+				data.whatsappId = selectedWhatsapp;
+			}
+
 			await api.put(`/tickets/${ticketid}`, data);
 
 			setLoading(false);
@@ -177,6 +188,24 @@ const TransferTicketModal = ({ modalOpen, onClose, ticketid }) => {
 							))}
 						</Select>
 					</FormControl>
+					<Can
+						role={loggedInUser.profile}
+						perform="ticket-options:transferWhatsapp"
+						yes={() => (!loadingWhatsapps && 
+							<FormControl variant="outlined" className={classes.maxWidth} style={{ marginTop: 20 }}>
+								<InputLabel>{i18n.t("transferTicketModal.fieldConnectionLabel")}</InputLabel>
+								<Select
+									value={selectedWhatsapp}
+									onChange={(e) => setSelectedWhatsapp(e.target.value)}
+									label={i18n.t("transferTicketModal.fieldConnectionPlaceholder")}
+								>
+									{whatsApps.map((whasapp) => (
+										<MenuItem key={whasapp.id} value={whasapp.id}>{whasapp.name}</MenuItem>
+									))}
+								</Select>
+							</FormControl>
+						)}
+					/>
 				</DialogContent>
 				<DialogActions>
 					<Button

frontend/src/rules.js

@@ -10,6 +10,7 @@ const rules = {
 			"user-modal:editProfile",
 			"user-modal:editQueues",
 			"ticket-options:deleteTicket",
+			"ticket-options:transferWhatsapp",
 			"contacts-page:deleteContact",
 		],
 	},

frontend/src/translate/languages/en.js

@@ -249,7 +249,9 @@ const messages = {
         title: "Transfer Ticket",
         fieldLabel: "Type to search for users",
         fieldQueueLabel: "Transfer to queue",
+        fieldConnectionLabel: "Transfer to connection",
         fieldQueuePlaceholder: "Please select a queue",
+        fieldConnectionPlaceholder: "Please select a connection",
         noOptions: "No user found with this name",
         buttons: {
           ok: "Transfer",

frontend/src/translate/languages/es.js

@@ -252,7 +252,9 @@ const messages = {
         title: "Transferir Ticket",
         fieldLabel: "Escriba para buscar usuarios",
         fieldQueueLabel: "Transferir a la cola",
+        fieldConnectionLabel: "Transferir to conexión",
         fieldQueuePlaceholder: "Seleccione una cola",
+        fieldConnectionPlaceholder: "Seleccione una conexión",
         noOptions: "No se encontraron usuarios con ese nombre",
         buttons: {
           ok: "Transferir",

frontend/src/translate/languages/pt.js

@@ -251,7 +251,9 @@ const messages = {
         title: "Transferir Ticket",
         fieldLabel: "Digite para buscar usuários",
         fieldQueueLabel: "Transferir para fila",
+        fieldConnectionLabel: "Transferir para conexão",
         fieldQueuePlaceholder: "Selecione uma fila",
+        fieldConnectionPlaceholder: "Selecione uma conexão",
         noOptions: "Nenhum usuário encontrado com esse nome",
         buttons: {
           ok: "Transferir",