From c5a842da034623c837936c3136f79ceff347f9bc Mon Sep 17 00:00:00 2001
From: Robson Tenorio <robson.tenorio@gmail.com>
Date: Tue, 11 Apr 2023 00:27:20 -0300
Subject: [PATCH] =?UTF-8?q?N=C3=BAmero=20do=20cliente=20trucado=20para=20A?=
 =?UTF-8?q?tendente?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ContactDrawer/index.js     |  9 ++-
 frontend/src/components/ContactModal/index.js | 75 ++++++++++++-------
 frontend/src/pages/Contacts/index.js          |  6 +-
 3 files changed, 55 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/ContactDrawer/index.js b/frontend/src/components/ContactDrawer/index.js
index 6c910f44..b697c602 100644
--- a/frontend/src/components/ContactDrawer/index.js
+++ b/frontend/src/components/ContactDrawer/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useContext } from "react";
 
 import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
@@ -19,6 +19,7 @@ import MarkdownWrapper from "../MarkdownWrapper";
 import { TagsContainer } from "../TagsContainer";
 import ModalImageContatc from "./ModalImage";
 import CopyToClipboard from "../CopyToClipboard";
+import { AuthContext } from "../../context/Auth/AuthContext";
 
 const drawerWidth = 320;
 
@@ -87,7 +88,7 @@ const useStyles = makeStyles(theme => ({
 
 const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
 	const classes = useStyles();
-
+	const { user } = useContext(AuthContext);
 	const [modalOpen, setModalOpen] = useState(false);
 
 	return (
@@ -127,8 +128,8 @@ const ContactDrawer = ({ open, handleDrawerClose, contact, loading }) => {
 							<CopyToClipboard content={contact.name} color="secondary" />
 							</Typography>
 						<Typography>
-							<Link href={`tel:${contact.number}`}>{contact.number}</Link>
-							<CopyToClipboard content={contact.number} color="secondary" />
+							<Link href={`tel:${user.profile === "admin" ? contact.number : contact.number.slice(0,-4) + "****"}`}>{user.profile === "admin" ? contact.number : contact.number.slice(0,-4) + "****"}</Link>
+							<CopyToClipboard content={user.profile === "admin" ? contact.number : contact.number.slice(0,-4) + "****"} color="secondary" />
 						</Typography>
 						{contact.email && (
 							<Typography>
diff --git a/frontend/src/components/ContactModal/index.js b/frontend/src/components/ContactModal/index.js
index 1423c8a4..ba0f3a48 100644
--- a/frontend/src/components/ContactModal/index.js
+++ b/frontend/src/components/ContactModal/index.js
@@ -1,26 +1,39 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, {
+	useState,
+	useEffect,
+	useRef,
+	useContext
+} from "react";
 
-import * as Yup from "yup";
-import { Formik, FieldArray, Form, Field } from "formik";
-import { toast } from "react-toastify";
+import {
+	Formik,
+	FieldArray,
+	Form,
+	Field
+} from "formik";
 
-import { makeStyles } from "@material-ui/core/styles";
 import { green } from "@material-ui/core/colors";
-import Button from "@material-ui/core/Button";
-import TextField from "@material-ui/core/TextField";
-import Dialog from "@material-ui/core/Dialog";
-import DialogActions from "@material-ui/core/DialogActions";
-import DialogContent from "@material-ui/core/DialogContent";
-import DialogTitle from "@material-ui/core/DialogTitle";
-import Typography from "@material-ui/core/Typography";
-import IconButton from "@material-ui/core/IconButton";
+import {
+	Button,
+	CircularProgress,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogTitle,
+	IconButton,
+	makeStyles,
+	TextField,
+	Typography
+} from "@material-ui/core";
 import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
-import CircularProgress from "@material-ui/core/CircularProgress";
 
 import { i18n } from "../../translate/i18n";
-
 import api from "../../services/api";
 import toastError from "../../errors/toastError";
+import * as Yup from "yup";
+import { toast } from "react-toastify";
+import { Can } from "../Can";
+import { AuthContext } from "../../context/Auth/AuthContext";
 
 const useStyles = makeStyles(theme => ({
 	root: {
@@ -31,17 +44,14 @@ const useStyles = makeStyles(theme => ({
 		marginRight: theme.spacing(1),
 		flex: 1,
 	},
-
 	extraAttr: {
 		display: "flex",
 		justifyContent: "center",
 		alignItems: "center",
 	},
-
 	btnWrapper: {
 		position: "relative",
 	},
-
 	buttonProgress: {
 		color: green[500],
 		position: "absolute",
@@ -49,7 +59,7 @@ const useStyles = makeStyles(theme => ({
 		left: "50%",
 		marginTop: -12,
 		marginLeft: -12,
-	},
+	}
 }));
 
 const ContactSchema = Yup.object().shape({
@@ -64,6 +74,7 @@ const ContactSchema = Yup.object().shape({
 const ContactModal = ({ open, onClose, contactId, initialValues, onSave }) => {
 	const classes = useStyles();
 	const isMounted = useRef(true);
+	const { user } = useContext(AuthContext);
 
 	const initialState = {
 		name: "",
@@ -161,15 +172,23 @@ const ContactModal = ({ open, onClose, contactId, initialValues, onSave }) => {
 									margin="dense"
 									className={classes.textField}
 								/>
-								<Field
-									as={TextField}
-									label={i18n.t("contactModal.form.number")}
-									name="number"
-									error={touched.number && Boolean(errors.number)}
-									helperText={touched.number && errors.number}
-									placeholder="5513912344321"
-									variant="outlined"
-									margin="dense"
+								<Can
+									role={user.profile}
+									perform="drawer-admin-items:view"
+									yes={() => (
+										<>
+											<Field
+												as={TextField}
+												label={i18n.t("contactModal.form.number")}
+												name="number"
+												error={touched.number && Boolean(errors.number)}
+												helperText={touched.number && errors.number}
+												placeholder="5522999999999"
+												variant="outlined"
+												margin="dense"
+											/>
+										</>
+									)}
 								/>
 								<div>
 									<Field
diff --git a/frontend/src/pages/Contacts/index.js b/frontend/src/pages/Contacts/index.js
index 3e622f6e..322b043d 100644
--- a/frontend/src/pages/Contacts/index.js
+++ b/frontend/src/pages/Contacts/index.js
@@ -113,9 +113,7 @@ const useStyles = makeStyles((theme) => ({
 const Contacts = () => {
   const classes = useStyles();
   const history = useHistory();
-
   const { user } = useContext(AuthContext);
-
   const [loading, setLoading] = useState(false);
   const [pageNumber, setPageNumber] = useState(1);
   const [searchParam, setSearchParam] = useState("");
@@ -245,6 +243,8 @@ const Contacts = () => {
     }
   };
 
+  console.log("USER", user.profile)
+
   return (
     <MainContainer className={classes.mainContainer}>
       <NewTicketModalPageContact
@@ -394,7 +394,7 @@ const Contacts = () => {
                     {<Avatar src={contact.profilePicUrl} className={classes.avatar} />}
                   </TableCell>
                   <TableCell>{contact.name}</TableCell>
-                  <TableCell align="center">{contact.number}</TableCell>
+                  <TableCell align="center">{user.profile === "admin" ? contact.number : contact.number.slice(0,-4) + "****"}</TableCell>
                   <TableCell align="center">{contact.email}</TableCell>
                   <TableCell align="center">
                     <IconButton