Feature/add contact to group

src/components/UI/DialogBox/DialogBox.module.css

@@ -1,5 +1,6 @@
 .DialogboxPaper {
   border-radius: 24px !important;
+  margin: 0px !important;
   margin-top: 66px !important;
   min-width: 395px !important;
 }
@@ -22,6 +23,15 @@
 .DialogTitle {
   color: #073f24;
   padding-top: 24px !important;
-  text-align: center;
   padding-bottom: 8px !important;
 }
+
+.DialogTitleCenter {
+  composes: DialogTitle;
+  text-align: center;
+}
+
+.DialogTitleLeft {
+  composes: DialogTitle;
+  text-align: left;
+}

src/components/UI/DialogBox/DialogBox.tsx

@@ -14,6 +14,7 @@ interface DialogProps {
   children?: ReactNode;
   buttonOk?: string;
   buttonCancel?: string;
+  titleAlign?: string;
   colorOk?: 'inherit' | 'primary' | 'secondary' | 'default' | undefined;
   colorCancel?: 'inherit' | 'primary' | 'secondary' | 'default' | undefined;
   alignButtons?: string;
@@ -32,6 +33,7 @@ export const DialogBox: React.SFC<DialogProps> = ({
   colorOk = 'primary',
   colorCancel = 'default',
   alignButtons,
+  titleAlign = 'center',
   skipCancel = false,
   skipOk = false,
 }) => {
@@ -57,6 +59,11 @@ export const DialogBox: React.SFC<DialogProps> = ({
     );
   }
 
+  let titleStyle = styles.DialogTitleCenter;
+  if (titleAlign === 'left') {
+    titleStyle = styles.DialogTitleLeft;
+  }
+
   let okButtonDisplay = null;
   if (!skipOk) {
     okButtonDisplay = (
@@ -85,7 +92,7 @@ export const DialogBox: React.SFC<DialogProps> = ({
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description"
       >
-        <DialogTitle id="alert-dialog-title" className={styles.DialogTitle}>
+        <DialogTitle id="alert-dialog-title" className={titleStyle} data-testid="dialogTitle">
           {title}
         </DialogTitle>
         <DialogContent>{children}</DialogContent>

src/components/UI/SearchDialogBox/SearchDialogBox.module.css

@@ -0,0 +1,43 @@
+.DialogBox {
+  width: 100%;
+}
+
+.Form {
+  padding-top: 5px;
+  padding-left: 4px;
+  max-height: 260px;
+  min-height: 100px;
+  overflow: auto;
+}
+
+.Input {
+  padding: 8px !important;
+  font-size: 12px !important;
+}
+
+.SearchIcon {
+  width: 13px;
+}
+
+.Outline {
+  border-radius: 6px !important;
+  border-width: 1px !important;
+  border-color: #eaedec !important;
+}
+
+.DeleteIcon {
+  width: 8px !important;
+  margin-right: 13px !important;
+}
+
+.Paper > ul > li:hover {
+  background-color: #edf6f2 !important;
+}
+
+.Autocomplete {
+  margin-bottom: 10px !important;
+}
+
+.Paper > ul > li {
+  color: #073f24;
+}

src/components/UI/SearchDialogBox/SearchDialogBox.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { mount } from 'enzyme';
+import { MockedProvider } from '@apollo/client/testing';
+import { SearchDialogBox } from './SearchDialogBox';
+
+const defaultProps = {
+  title: 'Search Box',
+  handleOk: jest.fn(),
+  handleCancel: jest.fn(),
+  options: [{ id: 1, label: 'something' }],
+  selectedOptions: ['1'],
+};
+const wrapper = mount(
+  <MockedProvider>
+    <SearchDialogBox {...defaultProps} />
+  </MockedProvider>
+);
+
+test('it should render the title correctly', () => {
+  expect(wrapper.find('div[data-testid="dialogTitle"]').text()).toEqual('Search Box');
+});
+
+test('it should contain the selected option', () => {
+  expect(wrapper.find('div[data-testid="searchChip"] span').text()).toEqual('something');
+});

src/components/UI/SearchDialogBox/SearchDialogBox.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import { DialogBox } from '../DialogBox/DialogBox';
+import { FormControl, Paper, Chip, TextField } from '@material-ui/core';
+import styles from './SearchDialogBox.module.css';
+import { ReactComponent as DeleteIcon } from '../../../assets/images/icons/Close.svg';
+import AutoComplete from '@material-ui/lab/Autocomplete';
+import { ReactComponent as SearchIcon } from '../../../assets/images/icons/Search/Desktop.svg';
+
+export interface SearchDialogBoxProps {
+  title: string;
+  handleOk: Function;
+  handleCancel: Function;
+  options: any;
+  selectedOptions: any;
+}
+
+export const SearchDialogBox = (props: any) => {
+  const [selectedOptions, setSelectedOptions] = useState<Array<string>>([]);
+
+  useEffect(() => {
+    setSelectedOptions(props.selectedOptions);
+  }, [props.selectedOptions]);
+
+  return (
+    <DialogBox
+      title={props.title}
+      handleOk={() => props.handleOk(selectedOptions)}
+      handleCancel={props.handleCancel}
+      titleAlign="left"
+      buttonOk="Save"
+    >
+      <div className={styles.DialogBox}>
+        <FormControl fullWidth>
+          <AutoComplete
+            className={styles.Autocomplete}
+            PaperComponent={({ className, ...props }) => (
+              <Paper
+                className={`${styles.Paper} ${className}`}
+                {...props}
+                data-testid="dialogInput"
+              ></Paper>
+            )}
+            value={props.options.filter((option: any) =>
+              selectedOptions.includes(option.id.toString())
+            )}
+            renderTags={(value: any, getTagProps) =>
+              value.map((option: any, index: number) => (
+                <Chip
+                  data-testid="searchChip"
+                  style={{ backgroundColor: '#e2f1ea', color: '#073F24', fontSize: '16px' }}
+                  label={option.label}
+                  {...getTagProps({ index })}
+                  deleteIcon={<DeleteIcon className={styles.DeleteIcon} data-testid="deleteIcon" />}
+                />
+              ))
+            }
+            multiple
+            freeSolo
+            onChange={(event, value: any) => {
+              setSelectedOptions(value.map((option: any) => option.id));
+            }}
+            options={props.options ? props.options : []}
+            getOptionLabel={(option: any) => option.label}
+            renderInput={(params) => (
+              <TextField {...params} variant="outlined" data-testid="dialogInput" label="Search" />
+            )}
+          ></AutoComplete>
+        </FormControl>
+      </div>
+    </DialogBox>
+  );
+};

src/containers/Chat/ChatMessages/ChatMessages.tsx

@@ -3,6 +3,7 @@ import { useQuery, useMutation, useLazyQuery, useApolloClient } from '@apollo/cl
 import { Container, Chip, FormControl, TextField, Paper } from '@material-ui/core';
 import moment from 'moment';
 import AutoComplete from '@material-ui/lab/Autocomplete';
+import { SearchDialogBox } from '../../../components/UI/SearchDialogBox/SearchDialogBox';
 
 import { ReactComponent as DeleteIcon } from '../../../assets/images/icons/Close.svg';
 import { ReactComponent as TagIcon } from '../../../assets/images/icons/Tags/Selected.svg';
@@ -241,12 +242,7 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId }) => {
     setShowDropdown(null);
   };
 
-  const handleSubmit = () => {
-    // const tagsForm = document.getElementById('tagsForm');
-    // let messageTags: any = tagsForm?.querySelectorAll('input[type="checkbox"]');
-    // messageTags = [].slice.call(messageTags);
-    // const selectedTags = messageTags.filter((tag: any) => tag.checked).map((tag: any) => tag.name);
-
+  const handleSubmit = (selectedMessageTags: any) => {
     const selectedTags = selectedMessageTags.filter(
       (tag: any) => !previousMessageTags.includes(tag)
     );
@@ -276,51 +272,13 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId }) => {
     const tagIcon = <TagIcon className={styles.TagIcon} />;
 
     dialogBox = (
-      <DialogBox
+      <SearchDialogBox
+        selectedOptions={selectedMessageTags}
         title="Assign tag to message"
-        handleCancel={closeDialogBox}
         handleOk={handleSubmit}
-        buttonOk="Save"
-      >
-        <div className={styles.DialogBox}>
-          <FormControl fullWidth>
-            <AutoComplete
-              PaperComponent={({ className, ...props }) => (
-                <Paper className={`${styles.Paper} ${className}`} {...props}></Paper>
-              )}
-              value={tags.filter((tag: any) => selectedMessageTags.includes(tag.id.toString()))}
-              renderTags={(value: any, getTagProps) =>
-                value.map((option: any, index: number) => (
-                  <Chip
-                    style={{ backgroundColor: '#e2f1ea', color: '#073F24', fontSize: '16px' }}
-                    icon={tagIcon}
-                    label={option.label}
-                    {...getTagProps({ index })}
-                    deleteIcon={
-                      <DeleteIcon className={styles.DeleteIcon} data-testid="deleteIcon" />
-                    }
-                  />
-                ))
-              }
-              multiple
-              freeSolo
-              onChange={(event, value: any) => {
-                setSelectedMessageTags(value.map((tag: any) => tag.id));
-              }}
-              options={AllTags.data ? AllTags.data.tags : []}
-              getOptionLabel={(option: any) => option.label}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  variant="outlined"
-                  data-testid="dialogInput"
-                  label="Search"
-                />
-              )}
-            ></AutoComplete>
-          </FormControl>
-        </div>
-      </DialogBox>
+        handleCancel={closeDialogBox}
+        options={tags}
+      ></SearchDialogBox>
     );
   }
 
@@ -409,6 +367,7 @@ export const ChatMessages: React.SFC<ChatMessagesProps> = ({ contactId }) => {
             ? conversationInfo.contact.name
             : conversationInfo.contact.phone
         }
+        contactId={contactId.toString()}
       />
       {messageListContainer}
       <ChatInput handleHeightChange={handleHeightChange} onSendMessage={sendMessageHandler} />

src/containers/Chat/ChatMessages/ContactBar/ContactBar.module.css

@@ -14,3 +14,58 @@
   font-size: 20px !important;
   color: #073f24;
 }
+
+.Configure {
+  cursor: pointer;
+  margin-left: auto;
+}
+
+.Configure > :first-child {
+  width: 21px !important;
+  height: 21px !important;
+}
+
+.Popper {
+  z-index: 1500;
+}
+
+.Popper button {
+  padding: 5px 30px 5px 10px !important;
+  text-transform: none !important;
+}
+
+.Popper > div:first-child {
+  padding-top: 10px !important;
+}
+
+.Popper > div:last-child {
+  padding-bottom: 10px !important;
+}
+
+.ListButton {
+  width: 100% !important;
+  font-weight: 400 !important;
+  font-size: 16px !important;
+  justify-content: flex-start !important;
+}
+
+.ListButton:hover {
+  background-color: #edf6f2 !important;
+}
+
+.Link {
+  text-decoration: none;
+}
+
+.Icon {
+  margin-right: 16px;
+}
+
+.ListButtonPrimary {
+  composes: ListButton;
+  color: #073f24 !important;
+}
+
+.Container {
+  margin-top: 6px;
+}