let's mask the phone number

src/containers/BlockContact/BlockContactList/BlockContact.test.helper.ts

@@ -23,6 +23,7 @@ const contactSearchQuery = {
           id: '1',
           name: 'Default receiver',
           phone: '99399393303',
+          maskedPhone: '99399393303',
           groups: [
             {
               id: '1',

src/containers/BlockContact/BlockContactList/BlockContactList.tsx

@@ -18,9 +18,9 @@ const getName = (name: string) => <p className={styles.LabelText}>{name}</p>;
 
 const getPhone = (text: string) => <p className={styles.TableText}>{text}</p>;
 
-const getColumns = ({ name, phone }: any) => ({
+const getColumns = ({ name, maskedPhone }: any) => ({
   name: getName(name),
-  phone: getPhone(phone),
+  phone: getPhone(maskedPhone),
 });
 
 const columnNames = ['NAME', 'PHONE NO', 'ACTIONS'];

src/containers/Chat/ChatConversations/ChatConversations.test.helper.ts

@@ -10,6 +10,7 @@ const withResult = {
           id: '6',
           name: 'Red Sparrow',
           phone: '919520285543',
+          maskedPhone: '919520285543',
           lastMessageAt: '2020-08-03T07:01:36Z',
           status: 'VALID',
           bspStatus: 'SESSION_AND_HSM',
@@ -92,6 +93,7 @@ export const searchMultiQuery = (term: string = '', limit: number = 50) => {
               lastMessageAt: '2020-11-18T04:37:57Z',
               name: 'Default receiver',
               phone: '9876543210',
+              maskedPhone: '9876543210',
               status: 'VALID',
               tags: [],
             },
@@ -113,6 +115,7 @@ export const searchMultiQuery = (term: string = '', limit: number = 50) => {
                 lastMessageAt: '2020-10-15T07:15:33Z',
                 name: 'Dignesh',
                 phone: '9876543210',
+                maskedPhone: '9876543210',
                 status: 'VALID',
               },
               id: '18',
@@ -144,6 +147,7 @@ export const searchMultiQuery = (term: string = '', limit: number = 50) => {
                 lastMessageAt: '2020-10-15T07:15:33Z',
                 name: 'Dignesh',
                 phone: '9876543210',
+                maskedPhone: '9876543210',
                 status: 'VALID',
               },
               id: '12',

src/containers/Chat/ChatConversations/ConversationList/ConversationList.tsx

@@ -214,7 +214,7 @@ export const ConversationList: React.SFC<ConversationListProps> = (props) => {
           onClick={() => props.setSelectedContactId(contact.id)}
           index={index}
           contactId={contact.id}
-          contactName={contact.name || contact.phone}
+          contactName={contact.name || contact.maskedPhone}
           lastMessage={conversation}
           senderLastMessage={contact.lastMessageAt}
           contactStatus={contact.status}
@@ -269,7 +269,7 @@ export const ConversationList: React.SFC<ConversationListProps> = (props) => {
           index={index}
           contactId={conversation.contact.id}
           contactName={
-            conversation.contact.name ? conversation.contact.name : conversation.contact.phone
+            conversation.contact.name ? conversation.contact.name : conversation.contact.maskedPhone
           }
           lastMessage={lastMessage}
           senderLastMessage={conversation.contact.lastMessageAt}

src/containers/Chat/ChatMessages/ChatMessages.tsx

@@ -351,7 +351,7 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId }) => {
         contactName={
           conversationInfo.contact.name
             ? conversationInfo.contact.name
-            : conversationInfo.contact.phone
+            : conversationInfo.contact.maskedPhone
         }
         contactId={contactId.toString()}
         lastMessageTime={conversationInfo.contact.lastMessageAt}

src/containers/Group/GroupContact/GroupContactList/GroupContactList.tsx

@@ -23,8 +23,8 @@ const getGroups = (groups: Array<any>) => (
   <p className={styles.GroupsText}>{groups.map((group: any) => group.label).join(', ')}</p>
 );
 
-const getColumns = ({ name, phone, groups }: any) => ({
-  label: getName(name, phone),
+const getColumns = ({ name, maskedPhone, groups }: any) => ({
+  label: getName(name, maskedPhone),
   groups: getGroups(groups),
 });
 

src/containers/Profile/Contact/ContactDescription/ContactDescription.module.css

@@ -24,6 +24,8 @@
   margin-left: auto;
   align-content: center;
   display: flex;
+  align-items: center;
+  padding-left: 15px;
 }
 
 .SessionTimer > span {
@@ -51,3 +53,16 @@
   font-size: 16px;
   color: #073f24;
 }
+
+.Visibility {
+  color: #93a29b;
+}
+
+.PhoneSection {
+  display: flex;
+  align-items: center;
+}
+
+.PhoneField {
+  width: 115px;
+}

src/containers/Profile/Contact/ContactDescription/ContactDescription.test.tsx

@@ -5,14 +5,16 @@ import { ContactDescription } from './ContactDescription';
 const date = new Date();
 const defaultProps = {
   fields: '{"Age":"14"}',
-  phoneNo: '9987399299',
+  phone: '9987399299',
+  maskedPhone: '9987399299',
   settings: '{"Status":"Active"}',
   groups: [{ id: 1, label: 'Default Group', users: [{ name: 'Glific' }] }],
   lastMessage: new Date(),
 };
 const propsWithMultipleGroups = {
   fields: {},
-  phoneNo: '9987399299',
+  phone: '9987399299',
+  maskedPhone: '9987399299',
   settings: {},
   groups: [
     { id: 1, label: 'Default Group', users: [{ name: 'Glific' }] },
@@ -31,7 +33,7 @@ it('should render ContactDescription', () => {
 
 test('it should display contact number', () => {
   const { getByTestId } = render(wrapper);
-  expect(getByTestId('phoneNo')).toHaveTextContent('+9987399299');
+  expect(getByTestId('phone')).toHaveTextContent('+9987399299');
 });
 
 test('it should display contact groups', () => {

src/containers/Profile/Contact/ContactDescription/ContactDescription.tsx

@@ -1,23 +1,31 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { IconButton } from '@material-ui/core';
+import { Visibility, VisibilityOff } from '@material-ui/icons';
 
 import styles from './ContactDescription.module.css';
 import { Timer } from '../../../../components/UI/Timer/Timer';
+import { Tooltip } from '../../../../components/UI/Tooltip/Tooltip';
 
 export interface ContactDescriptionProps {
   fields: any;
   settings: any;
-  phoneNo: string;
+  phone: string;
+  maskedPhone: string;
   groups: any;
   lastMessage: string;
 }
 
 export const ContactDescription: React.FC<ContactDescriptionProps> = (props) => {
-  const { phoneNo, groups, lastMessage } = props;
+  const { phone, maskedPhone, groups, lastMessage } = props;
   let { fields, settings } = props;
+
+  const [showPlainPhone, setShowPlainPhone] = useState(false);
+
   // list of groups that the contact is assigned
   let assignedToGroup: any = Array.from(
     new Set([].concat(...groups.map((group: any) => group.users.map((user: any) => user.name))))
   );
+
   if (assignedToGroup.length > 2) {
     assignedToGroup = `${assignedToGroup.slice(0, 2).join(', ')} +${(
       assignedToGroup.length - 2
@@ -45,12 +53,53 @@ export const ContactDescription: React.FC<ContactDescriptionProps> = (props) =>
     fields = JSON.parse(fields);
   }
 
+  const handlePhoneDisplay = () => {
+    setShowPlainPhone(!showPlainPhone);
+  };
+
+  let phoneDisplay = (
+    <div data-testid="phone" className={styles.PhoneField}>
+      +{maskedPhone}
+    </div>
+  );
+  if (phone) {
+    let phoneDisplayValue = maskedPhone;
+    let visibilityElement = (
+      <Tooltip title="Hide number" placement="right">
+        <Visibility classes={{ root: styles.Visibility }} />
+      </Tooltip>
+    );
+    if (showPlainPhone) {
+      phoneDisplayValue = phone;
+      visibilityElement = (
+        <Tooltip title="Show number" placement="right">
+          <VisibilityOff classes={{ root: styles.Visibility }} />
+        </Tooltip>
+      );
+    }
+
+    phoneDisplay = (
+      <div className={styles.PhoneSection}>
+        <div data-testid="phone" className={styles.PhoneField}>
+          +{phoneDisplayValue}
+        </div>
+        <IconButton
+          aria-label="toggle phone visibility"
+          data-testid="phoneToggle"
+          onClick={handlePhoneDisplay}
+          edge="end"
+        >
+          {visibilityElement}
+        </IconButton>
+      </div>
+    );
+  }
+
   return (
     <div className={styles.DescriptionContainer} data-testid="contactDescription">
       <h2 className={styles.Title}>Details</h2>
       <div className={styles.Description}>
-        <span data-testid="phoneNo">+{phoneNo}</span>
-
+        {phoneDisplay}
         <div className={styles.SessionTimer}>
           <span>Session Timer</span>
           <Timer time={lastMessage} />

src/containers/Profile/Contact/ContactProfile.tsx

@@ -4,8 +4,8 @@ import { useQuery, useMutation } from '@apollo/client';
 import styles from './ContactProfile.module.css';
 import { Profile } from '../Profile';
 import { ContactDescription } from './ContactDescription/ContactDescription';
-import { GET_CONTACT_DETAILS } from '../../../graphql/queries/Contact';
 import { AutoComplete } from '../../../components/UI/Form/AutoComplete/AutoComplete';
+import { GET_CONTACT_DETAILS } from '../../../graphql/queries/Contact';
 import { FILTER_TAGS_NAME } from '../../../graphql/queries/Tag';
 import { UPDATE_CONTACT_TAGS } from '../../../graphql/mutations/Contact';
 import { setVariables } from '../../../common/constants';
@@ -66,15 +66,17 @@ export const ContactProfile: React.SFC<ContactProfileProps> = (props) => {
     },
   };
 
-  let phoneNo = '';
+  let phone = '';
+  let maskedPhone = '';
   let groups = [];
   let lastMessage = '';
   let fields = {};
   let settings = {};
   if (data) {
     const { contact } = data;
     const contactData = contact.contact;
-    phoneNo = contactData.phone;
+    phone = contactData.phone;
+    maskedPhone = contactData.maskedPhone;
     groups = contactData.groups;
     lastMessage = contactData.lastMessageAt;
     fields = contactData.fields;
@@ -86,6 +88,7 @@ export const ContactProfile: React.SFC<ContactProfileProps> = (props) => {
   const setSelectedTags = (selectedTags: any) => {
     setSelected(selectedTags);
   };
+
   return (
     <div className={styles.ContactProfile}>
       <div className={styles.ContactForm} data-testid="ContactProfile">
@@ -98,11 +101,13 @@ export const ContactProfile: React.SFC<ContactProfileProps> = (props) => {
           profileType="Contact"
           redirectionLink={`chat/${match.params.id}`}
           afterDelete={{ link: '/chat' }}
+          removePhoneField
         />
       </div>
       <div className={styles.ContactDescription}>
         <ContactDescription
-          phoneNo={phoneNo}
+          phone={phone}
+          maskedPhone={maskedPhone}
           fields={fields}
           settings={settings}
           groups={groups}

src/containers/Profile/Profile.tsx

@@ -32,6 +32,7 @@ export interface ProfileProps {
   additionalState?: any;
   additionalQuery?: any;
   afterDelete?: any;
+  removePhoneField?: boolean;
 }
 
 export const Profile: React.SFC<ProfileProps> = ({
@@ -43,6 +44,7 @@ export const Profile: React.SFC<ProfileProps> = ({
   additionalState,
   additionalQuery,
   afterDelete,
+  removePhoneField = false,
 }) => {
   const [name, setName] = useState('');
   const [phone, setPhone] = useState('');
@@ -54,6 +56,7 @@ export const Profile: React.SFC<ProfileProps> = ({
   if (loading) return <Loading />;
 
   const loggedInUserContactId = data.currentUser.user.contact.id;
+  const currentUserPhone = data.currentUser.user.phone;
 
   let currentContactId;
   if (!match) {
@@ -74,7 +77,13 @@ export const Profile: React.SFC<ProfileProps> = ({
     ...rest
   }: any) => {
     setName(nameValue);
-    setPhone(phoneValue);
+    if (phoneValue) {
+      setPhone(phoneValue);
+    } else {
+      // contact api does not return the phone when role is staff, hence in this case we manually set the phone
+      // for the current user
+      setPhone(currentUserPhone);
+    }
     setStatus(statusValue);
     setBspStatus(bspStatusValue);
     if (additionalProfileStates) {
@@ -124,6 +133,11 @@ export const Profile: React.SFC<ProfileProps> = ({
     formFields.splice(1, 0, additionalField);
   }
 
+  // remove phone field incase of contact profile
+  if (removePhoneField) {
+    formFields.splice(2, 1);
+  }
+
   let type: any;
   let pageTitle = 'Contact Profile';
   if (profileType === 'User' || loggedInUserContactId === currentContactId) {

src/graphql/queries/Contact.ts

@@ -6,6 +6,7 @@ export const CONTACT_SEARCH_QUERY = gql`
       id
       name
       phone
+      maskedPhone
       groups {
         id
         label
@@ -95,6 +96,7 @@ export const GET_CONTACT_DETAILS = gql`
     contact(id: $id) {
       contact {
         phone
+        maskedPhone
         lastMessageAt
         groups {
           id

src/graphql/queries/Search.ts

@@ -7,6 +7,7 @@ export const SEARCH_QUERY = gql`
         id
         name
         phone
+        maskedPhone
         lastMessageAt
         status
         bspStatus
@@ -55,6 +56,7 @@ export const SEARCH_MULTI_QUERY = gql`
         id
         name
         phone
+        maskedPhone
         lastMessageAt
         status
         bspStatus
@@ -73,6 +75,7 @@ export const SEARCH_MULTI_QUERY = gql`
           id
           name
           phone
+          maskedPhone
           lastMessageAt
           status
           bspStatus
@@ -103,6 +106,7 @@ export const SEARCH_MULTI_QUERY = gql`
           id
           name
           phone
+          maskedPhone
           lastMessageAt
           status
           bspStatus