Merge pull request #806 from glific/feature/block-simulator

Removed block and view contact info option for simulator
glific · Dec 14, 2020 · 14759ce · 14759ce
2 parents 21ef05a + ea690a3
commit 14759ce
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 10 deletions.
diff --git a/src/assets/images/icons/BlockDisabled.svg b/src/assets/images/icons/BlockDisabled.svg
diff --git a/src/assets/images/icons/Contact/ProfileDisabled.svg b/src/assets/images/icons/Contact/ProfileDisabled.svg
diff --git a/src/containers/Chat/Chat.tsx b/src/containers/Chat/Chat.tsx
@@ -64,7 +64,10 @@ export const Chat: React.SFC<ChatProps> = ({ contactId }) => {
     chatInterface = (
       <>
         <div className={styles.ChatMessages}>
-          <ChatMessages contactId={showSimulator && simulatorId ? simulatorId : contactId} />
+          <ChatMessages
+            contactId={showSimulator && simulatorId ? simulatorId : contactId}
+            simulatorId={simulatorId}
+          />
         </div>
         <div className={styles.ChatConversations}>
           <ChatConversations

diff --git a/src/containers/Chat/ChatMessages/ChatMessages.tsx b/src/containers/Chat/ChatMessages/ChatMessages.tsx
@@ -22,9 +22,10 @@ import { getCachedConverations, updateConversationsCache } from '../../../servic
 
 export interface ChatMessagesProps {
   contactId: number | string;
+  simulatorId?: string | null;
 }
 
-export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId }) => {
+export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, simulatorId }) => {
   // create an instance of apolloclient
   const client = useApolloClient();
 
@@ -378,6 +379,7 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId }) => {
             ? conversationInfo.contact.name
             : conversationInfo.contact.maskedPhone
         }
+        isSimulator={contactId === simulatorId}
         contactId={contactId.toString()}
         lastMessageTime={conversationInfo.contact.lastMessageAt}
         contactStatus={conversationInfo.contact.status}

diff --git a/src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx b/src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx
@@ -8,15 +8,17 @@ import {
   Button,
   ClickAwayListener,
 } from '@material-ui/core';
-import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { useMutation, useLazyQuery, useApolloClient } from '@apollo/client';
 
 import styles from './ContactBar.module.css';
 import { SearchDialogBox } from '../../../../components/UI/SearchDialogBox/SearchDialogBox';
 import { ReactComponent as DropdownIcon } from '../../../../assets/images/icons/BrownDropdown.svg';
 import { ReactComponent as AddContactIcon } from '../../../../assets/images/icons/Contact/Light.svg';
 import { ReactComponent as BlockIcon } from '../../../../assets/images/icons/Block.svg';
+import { ReactComponent as BlockDisabledIcon } from '../../../../assets/images/icons/BlockDisabled.svg';
 import { ReactComponent as ProfileIcon } from '../../../../assets/images/icons/Contact/Profile.svg';
+import { ReactComponent as ProfileDisabledIcon } from '../../../../assets/images/icons/Contact/ProfileDisabled.svg';
 import { ReactComponent as FlowIcon } from '../../../../assets/images/icons/Flow/Dark.svg';
 import { ReactComponent as FlowUnselectedIcon } from '../../../../assets/images/icons/Flow/Unselected.svg';
 import { ReactComponent as ClearConversation } from '../../../../assets/images/icons/Chat/ClearConversation.svg';
@@ -47,13 +49,22 @@ export interface ContactBarProps {
   contactStatus: string;
   contactBspStatus: string;
   handleAction?: any;
+  isSimulator?: boolean;
 }
 
 export const ContactBar: React.SFC<ContactBarProps> = (props) => {
-  const { contactId, contactBspStatus, lastMessageTime, contactStatus, contactName } = props;
+  const {
+    contactId,
+    contactBspStatus,
+    lastMessageTime,
+    contactStatus,
+    contactName,
+    isSimulator,
+  } = props;
   const client = useApolloClient();
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
+  const history = useHistory();
   const [showGroupDialog, setShowGroupDialog] = useState(false);
   const [showFlowDialog, setShowFlowDialog] = useState(false);
   const [showBlockDialog, setShowBlockDialog] = useState(false);
@@ -312,12 +323,21 @@ export const ContactBar: React.SFC<ContactBarProps> = (props) => {
       {({ TransitionProps }) => (
         <Fade {...TransitionProps} timeout={350}>
           <Paper elevation={3} className={styles.Container}>
-            <Link to={`/contact-profile/${props.contactId}`} className={styles.Link}>
-              <Button className={styles.ListButtonPrimary}>
+            <Button
+              className={styles.ListButtonPrimary}
+              disabled={isSimulator}
+              onClick={() => {
+                history.push(`/contact-profile/${props.contactId}`);
+              }}
+            >
+              {isSimulator ? (
+                <ProfileDisabledIcon className={styles.Icon} />
+              ) : (
                 <ProfileIcon className={styles.Icon} />
-                View contact profile
-              </Button>
-            </Link>
+              )}
+              View contact profile
+            </Button>
+
             {flowButton}
             <Button
               data-testid="groupButton"
@@ -342,9 +362,14 @@ export const ContactBar: React.SFC<ContactBarProps> = (props) => {
               data-testid="blockButton"
               className={styles.ListButtonDanger}
               color="secondary"
+              disabled={isSimulator}
               onClick={() => setShowBlockDialog(true)}
             >
-              <BlockIcon className={styles.Icon} />
+              {isSimulator ? (
+                <BlockDisabledIcon className={styles.Icon} />
+              ) : (
+                <BlockIcon className={styles.Icon} />
+              )}
               Block Contact
             </Button>
           </Paper>