✨ 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