Updated collection info label

src/containers/Chat/Chat.test.tsx

@@ -109,7 +109,9 @@ describe('<Chat />', () => {
   });
 
   test('check condition when no subscription data provided', async () => {
-    const { findByTestId } = render(wrapper);
+    const { getByText, findByTestId } = render(wrapper);
+
+    expect(getByText('Loading...')).toBeInTheDocument();
 
     const ChatConversation = await findByTestId('beneficiaryName');
     expect(ChatConversation).toHaveTextContent('Effie Cormier');

src/containers/Chat/ChatMessages/ChatMessages.test.tsx

@@ -295,3 +295,68 @@ test('Collection: if cache', async () => {
     fireEvent.click(getByTestId('jumpToLatest'));
   });
 });
+
+test('click on Clear conversation', async () => {
+  const chatMessages = (
+    <ApolloProvider client={client}>
+      <ChatMessages contactId="2" />
+    </ApolloProvider>
+  );
+  const { getByTestId } = render(chatMessages);
+  await waitFor(() => {
+    fireEvent.click(getByTestId('dropdownIcon'));
+    fireEvent.click(getByTestId('clearChatButton'));
+    // need to check this
+    // fireEvent.click(getByTestId('ok-button'));
+    // expect(getByTestId('app')).toHaveTextContent('Conversation cleared for this contact');
+  });
+});
+
+test('Load more messages', async () => {
+  const searchQuery = {
+    query: SEARCH_QUERY,
+    variables: {
+      filter: {},
+      contactOpts: { limit: DEFAULT_CONTACT_LIMIT },
+      messageOpts: { limit: DEFAULT_MESSAGE_LIMIT },
+    },
+    data: {
+      search: [
+        {
+          group: null,
+          contact: {
+            id: '2',
+            name: 'Effie Cormier',
+            phone: '987654321',
+            maskedPhone: '98****321',
+            lastMessageAt: '2020-06-29T09:31:47Z',
+            status: 'VALID',
+            bspStatus: 'SESSION_AND_HSM',
+            isOrgRead: true,
+          },
+          messages: new Array(20).fill(body),
+        },
+      ],
+    },
+  };
+
+  cache.writeQuery(searchQuery);
+  const client = new ApolloClient({
+    cache: cache,
+    assumeImmutableResults: true,
+  });
+
+  const chatMessages = (
+    <ApolloProvider client={client}>
+      <ChatMessages contactId="2" />
+    </ApolloProvider>
+  );
+
+  const { getByTestId } = render(chatMessages);
+
+  await waitFor(() => {
+    const container: any = document.querySelector('.messageContainer');
+    fireEvent.scroll(container, { target: { scrollY: 0 } });
+    fireEvent.click(getByTestId('loadMoreMessages'));
+  });
+});

src/containers/Chat/ChatMessages/ChatMessages.tsx

@@ -30,6 +30,7 @@ import {
 import { FILTER_TAGS_NAME } from '../../../graphql/queries/Tag';
 import { ReactComponent as TagIcon } from '../../../assets/images/icons/Tags/Selected.svg';
 import { getCachedConverations, updateConversationsCache } from '../../../services/ChatService';
+import { CollectionInformation } from '../../Collection/CollectionInformation/CollectionInformation';
 
 export interface ChatMessagesProps {
   contactId?: number | string | null;
@@ -57,7 +58,7 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
   }
 
   const [editTagsMessageId, setEditTagsMessageId] = useState<number | null>(null);
-  const [dialog, setDialogbox] = useState(false);
+  const [dialog, setDialogbox] = useState<string>();
   const [selectedMessageTags, setSelectedMessageTags] = useState<any>(null);
   const [previousMessageTags, setPreviousMessageTags] = useState<any>(null);
   const [showDropdown, setShowDropdown] = useState<any>(null);
@@ -67,6 +68,8 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
   const [showJumpToLatest, setShowJumpToLatest] = useState(true);
   const [defaultJumpToLatest, setDefaultShowJumpToLatest] = useState(true);
   const [conversationInfo, setConversationInfo] = useState<any>({});
+  const [collectionVariables, setCollectionVariables] = useState<any>({});
+  let dialogBox;
 
   useEffect(() => {
     setShowLoadMore(true);
@@ -251,7 +254,7 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
   const [createMessageTag] = useMutation(UPDATE_MESSAGE_TAGS, {
     onCompleted: () => {
       setNotification(client, 'Tags added successfully');
-      setDialogbox(false);
+      setDialogbox('');
     },
   });
 
@@ -270,6 +273,13 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
     return payloadCopy;
   };
 
+  const handleSendMessage = () => {
+    setDialogbox('');
+    sendMessageToCollection({
+      variables: collectionVariables,
+    });
+  };
+
   // this function is called when the message is sent collection
   const sendCollectionMessageHandler = (
     body: string,
@@ -278,6 +288,9 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
     selectedTemplate: any,
     variableParam: any
   ) => {
+    // display collection info popup
+    setDialogbox('collection');
+
     const payload: any = {
       body,
       senderId: 1,
@@ -286,11 +299,9 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
       flow: 'OUTBOUND',
     };
 
-    sendMessageToCollection({
-      variables: {
-        groupId: collectionId,
-        input: updatePayload(payload, selectedTemplate, variableParam),
-      },
+    setCollectionVariables({
+      groupId: collectionId,
+      input: updatePayload(payload, selectedTemplate, variableParam),
     });
   };
 
@@ -354,7 +365,14 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
   const findContactInAllConversations = () => {
     if (allConversations && allConversations.search) {
       // loop through the cached conversations and find if contact exists
-      updateConversationInfo('contact', contactId);
+      // need to check - updateConversationInfo('contact', contactId);
+      allConversations.search.map((conversation: any, index: any) => {
+        if (conversation.contact.id === contactId?.toString()) {
+          conversationIndex = index;
+          setConversationInfo(conversation);
+        }
+        return null;
+      });
     }
 
     // if conversation is not present then fetch for contact
@@ -426,7 +444,7 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
   }, [contactId, collectionId, allConversations]);
 
   const closeDialogBox = () => {
-    setDialogbox(false);
+    setDialogbox('');
     setShowDropdown(null);
   };
   /* istanbul ignore next */
@@ -435,7 +453,7 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
     unselectedTags = previousMessageTags.filter((tag: any) => !tags.includes(tag));
 
     if (selectedTags.length === 0 && unselectedTags.length === 0) {
-      setDialogbox(false);
+      setDialogbox('');
       setShowDropdown(null);
     } else {
       createMessageTag({
@@ -450,11 +468,9 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
     }
   };
 
-  let dialogBox;
-
   const tags = allTags.data ? allTags.data.tags : [];
 
-  if (dialog) {
+  if (dialog === 'tag') {
     dialogBox = (
       <SearchDialogBox
         selectedOptions={selectedMessageTags}
@@ -495,7 +511,7 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
             const messageTagId = messageTags.map((tag: any) => tag.id);
             setSelectedMessageTags(messageTagId);
             setPreviousMessageTags(messageTagId);
-            setDialogbox(!dialog);
+            setDialogbox('tag');
           }}
           focus={index === 0}
           showMessage={
@@ -513,7 +529,6 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
       .reverse();
   }
 
-  /* istanbul ignore next */
   const loadMoreMessages = () => {
     const { messageNumber } = conversationInfo.messages[conversationInfo.messages.length - 1];
     const variables: any = {
@@ -593,8 +608,8 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
     conversationInfoCopy.messages = [];
     let allConversationsCopy: any = [];
     allConversationsCopy = JSON.parse(JSON.stringify(allConversations));
-    allConversationsCopy.search[conversationIndex] = conversationInfoCopy;
-
+    const index = conversationIndex === -1 ? 0 : conversationIndex;
+    allConversationsCopy.search[index] = conversationInfoCopy;
     // update allConversations in the cache
     updateConversationsCache(allConversationsCopy, client, queryVariables);
   };
@@ -623,7 +638,7 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
         lastMessageTime={conversationInfo.contact.lastMessageAt}
         contactStatus={conversationInfo.contact.status}
         contactBspStatus={conversationInfo.contact.bspStatus}
-        handleAction={handleChatClearedAction}
+        handleAction={() => handleChatClearedAction()}
       />
     );
 
@@ -702,6 +717,14 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId, collecti
   return (
     <Container className={styles.ChatMessages} maxWidth={false} disableGutters>
       {dialogBox}
+      {dialog === 'collection' ? (
+        <CollectionInformation
+          collectionId={collectionId}
+          displayPopup
+          setDisplayPopup={() => setDialogbox('')}
+          handleSendMessage={() => handleSendMessage()}
+        />
+      ) : null}
       {topChatBar}
       {messageListContainer}
       {conversationInfo.messages.length && (showJumpToLatest || defaultJumpToLatest)

src/containers/Chat/ChatMessages/ContactBar/ContactBar.tsx

@@ -544,8 +544,14 @@ export const ContactBar: React.SFC<ContactBarProps> = (props) => {
             <div className={styles.InfoWrapperRight}>
               <div className={styles.ContactDetails}>
                 <ClickAwayListener onClickAway={() => setAnchorEl(null)}>
-                  <div className={styles.Configure} data-testid="dropdownIcon">
-                    <DropdownIcon onClick={handleConfigureIconClick} />
+                  <div
+                    className={styles.Configure}
+                    data-testid="dropdownIcon"
+                    onClick={handleConfigureIconClick}
+                    onKeyPress={handleConfigureIconClick}
+                    aria-hidden
+                  >
+                    <DropdownIcon />
                   </div>
                 </ClickAwayListener>
                 <Typography

src/containers/Collection/CollectionInformation/CollectionInformation.module.css

@@ -37,3 +37,14 @@
   align-items: flex-end;
   flex-direction: column;
 }
+
+.Message {
+  width: 331px;
+  line-height: 20px;
+  text-align: center;
+  color: #073f24;
+}
+
+.Count:not(:empty) ~ .Count:not(:empty):before {
+  content: ', ';
+}

src/containers/Collection/CollectionInformation/CollectionInformation.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { CollectionInformation } from './CollectionInformation';
 import { MockedProvider } from '@apollo/client/testing';
@@ -55,7 +55,7 @@ describe('render SessionInfo', () => {
   test('it should have session data', () => {
     const { getByText } = render(wrapper);
 
-    const SessionInfo = getByText('In-session:');
+    const SessionInfo = getByText('Session messages:');
 
     expect(SessionInfo).toBeInTheDocument();
   });
@@ -84,3 +84,45 @@ describe('render SessionInfo', () => {
     });
   });
 });
+
+describe('render collection info popup', () => {
+  const wrapper = (
+    <MockedProvider mocks={[getCollectionInfo, collectionUsersQuery]} addTypename={false}>
+      <CollectionInformation
+        collectionId={'1'}
+        displayPopup
+        setDisplayPopup={() => Function}
+        handleSendMessage={() => Function}
+      />
+    </MockedProvider>
+  );
+  test('it should display popup', async () => {
+    const { getAllByText } = render(wrapper);
+
+    await waitFor(() => {
+      const SessionInfo = getAllByText('1');
+
+      expect(SessionInfo);
+    });
+  });
+
+  test('click on ok', async () => {
+    const { findByTestId } = render(wrapper);
+
+    await waitFor(async () => {
+      const Ok = findByTestId('ok-button');
+
+      fireEvent.click(await Ok);
+    });
+  });
+
+  test('click on cancel', async () => {
+    const { findByTestId } = render(wrapper);
+
+    await waitFor(async () => {
+      const cancel = findByTestId('cancel-button');
+
+      fireEvent.click(await cancel);
+    });
+  });
+});