[#3246] fix contacts details view on third column (#3280)

* contact column collapse and highlight selected

* fixes

* small fixes

* small type fix

frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/ConversationsForContact.tsx → frontend/inbox/src/components/ContactDetails/ConversationsForContact.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 import {Link} from 'react-router-dom';
-import {INBOX_CONVERSATIONS_ROUTE} from '../../../../../routes/routes';
+import {INBOX_CONVERSATIONS_ROUTE} from '../../routes/routes';
 import {Source} from 'model';
 import {ConnectorAvatar} from 'components';
 import {useTranslation} from 'react-i18next';

frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/ContactDetails/index.tsx → frontend/inbox/src/components/ContactDetails/index.tsx

@@ -1,7 +1,7 @@
 import React, {useState, useEffect, SetStateAction} from 'react';
 import _, {connect, ConnectedProps} from 'react-redux';
-import {getContactDetails, updateContactDetails} from '../../../../../actions';
-import {StateModel} from '../../../../../reducers';
+import {getContactDetails, updateContactDetails} from '../../actions';
+import {StateModel} from '../../reducers';
 import {getInfoDetailsPayload, fillContactInfo} from './util';
 import {UpdateContactDetailsRequestPayload} from 'httpclient/src';
 import {Contact} from 'model';

frontend/inbox/src/pages/Contacts/ContactInformation/index.module.scss

@@ -199,3 +199,21 @@
     fill: var(--color-text-gray);
   }
 }
+
+.contactsDetailsCollapseIcon {
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  width: 20px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.3s;
+  svg {
+    fill: var(--color-airy-blue);
+  }
+}
+
+.contactsDetailsCollapseIcon:hover {
+  opacity: 0.5;
+}

frontend/inbox/src/pages/Contacts/ContactInformation/index.tsx

@@ -3,7 +3,7 @@ import React, {useEffect, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import {connect, ConnectedProps} from 'react-redux';
 import styles from './index.module.scss';
-import ContactDetails from '../../Inbox/Messenger/ConversationMetadata/ContactDetails';
+import ContactDetails from '../../../components/ContactDetails';
 import {useAnimation} from 'render';
 import {Contact} from 'model';
 import {Avatar} from 'components/message/Avatar';
@@ -13,6 +13,7 @@ import {ReactComponent as CloseIcon} from 'assets/images/icons/close.svg';
 import {ReactComponent as CheckmarkCircleIcon} from 'assets/images/icons/checkmark.svg';
 import {ReactComponent as EditIcon} from 'assets/images/icons/pen.svg';
 import {ReactComponent as CancelIcon} from 'assets/images/icons/cancelCross.svg';
+import {ReactComponent as CollapseRightArrowsIcon} from 'assets/images/icons/collapseRightArrows.svg';
 import {StateModel} from '../../../reducers';
 import {
   cyCancelEditContactIcon,
@@ -40,6 +41,8 @@ type ContactInformationProps = {
   editModeOn: boolean;
   cancelEdit: boolean;
   setEditModeOn: (editing: boolean) => void;
+  setContactInformationVisible: React.Dispatch<React.SetStateAction<boolean>>;
+  contactInformationVisible: boolean;
 } & ConnectedProps<typeof connector>;
 
 const ContactInformation = (props: ContactInformationProps) => {
@@ -52,6 +55,8 @@ const ContactInformation = (props: ContactInformationProps) => {
     editModeOn,
     cancelEdit,
     setEditModeOn,
+    setContactInformationVisible,
+    contactInformationVisible,
   } = props;
   const {t} = useTranslation();
   const [showEditDisplayName, setShowEditDisplayName] = useState(false);
@@ -119,8 +124,14 @@ const ContactInformation = (props: ContactInformationProps) => {
 
   return (
     <>
-      {(contact || conversationId) && (
+      {(contact || conversationId) && contactInformationVisible && (
         <div className={styles.content}>
+          <button
+            className={styles.contactsDetailsCollapseIcon}
+            onClick={() => setContactInformationVisible(!contactInformationVisible)}
+          >
+            <CollapseRightArrowsIcon />
+          </button>
           {!isEditing ? (
             <button
               className={`${styles.editIcon} ${isContactDetailsExpanded ? styles.iconBlue : styles.iconGrey}`}

frontend/inbox/src/pages/Contacts/ContactListItem/index.module.scss

@@ -13,6 +13,10 @@
   }
 }
 
+.itemSelected {
+  background: var(--color-background-blue);
+}
+
 .avatarDisplayName {
   display: flex;
   align-items: center;

frontend/inbox/src/pages/Contacts/ContactListItem/index.tsx

@@ -14,7 +14,7 @@ import {useTranslation} from 'react-i18next';
 import {Link} from 'react-router-dom';
 import {INBOX_CONVERSATIONS_ROUTE} from '../../../routes/routes';
 import DeleteContactModal from '../DeleteContactModal';
-import {ConversationInfoForContact} from '../../Inbox/Messenger/ConversationMetadata/ContactDetails';
+import {ConversationInfoForContact} from '../../../components/ContactDetails';
 import {StateModel} from '../../../reducers';
 import {connect, ConnectedProps} from 'react-redux';
 
@@ -30,10 +30,21 @@ type ContactListItemProps = {
   setContact: (contact: Contact) => void;
   setEditModeOn: (editOn: boolean) => void;
   setCancelEdit: (cancel: boolean) => void;
+  setCurrentVisibleContactId: React.Dispatch<React.SetStateAction<string>>;
+  currentVisibleContactId: string;
 } & ConnectedProps<typeof connector>;
 
 const ContactListItem = (props: ContactListItemProps) => {
-  const {contacts, contact, setConversationId, setContact, setEditModeOn, setCancelEdit} = props;
+  const {
+    contacts,
+    contact,
+    setConversationId,
+    setContact,
+    setEditModeOn,
+    setCancelEdit,
+    setCurrentVisibleContactId,
+    currentVisibleContactId,
+  } = props;
   const {t} = useTranslation();
   const conversationId = contact.conversations && Object.keys(contact?.conversations)[0];
   const [showDeleteContactModal, setShowDeleteContactModal] = useState(false);
@@ -77,20 +88,24 @@ const ContactListItem = (props: ContactListItemProps) => {
     setContact(contact);
     setCancelEdit(true);
     setEditModeOn(false);
+    setCurrentVisibleContactId(contact.id);
   };
 
   const handleShowModal = (show: boolean) => {
     setShowDeleteContactModal(show);
   };
 
-  const handleEditMode = (event: any) => {
+  const handleEditMode = (event: React.MouseEvent<HTMLDivElement>) => {
     setContact(contact);
     setEditModeOn(true);
     event.stopPropagation();
   };
 
   return (
-    <div className={styles.container} onClick={handleOnClick}>
+    <div
+      className={`${styles.container} ${contact.id === currentVisibleContactId ? styles.itemSelected : ''}`}
+      onClick={handleOnClick}
+    >
       <div className={styles.avatarDisplayName}>
         <Avatar contact={contact} />
         <span>{currentContactDisplayName}</span>

frontend/inbox/src/pages/Contacts/index.module.scss

@@ -71,6 +71,14 @@
   flex-direction: column;
 }
 
-.animateIn {
+.paginationContainer {
+  margin: 0 32px 32px 32px;
+}
+
+.contactColumnAnimateIn {
   animation: contactsInformationIn 300ms ease;
 }
+
+.contactColumnAnimateOut {
+  animation: contactsInformationOut 300ms ease;
+}

frontend/inbox/src/pages/Contacts/index.tsx

@@ -31,6 +31,7 @@ const Contacts = (props: ContactsProps) => {
   const [editModeOn, setEditModeOn] = useState(false);
   const [cancelEdit, setCancelEdit] = useState(false);
   const [contactInformationVisible, setContactInformationVisible] = useState(false);
+  const [currentVisibleContactId, setCurrentVisibleContactId] = useState('');
   const listPageSize = 9;
   const fetchNextPage = 5;
 
@@ -51,6 +52,13 @@ const Contacts = (props: ContactsProps) => {
     return contacts.sort(contactSorter).slice(firstPageIndex, lastPageIndex);
   }, [currentPage, pageSize, contacts.length]);
 
+  useEffect(() => {
+    if (currentTableData?.[0]?.id) {
+      setCurrentVisibleContactId(currentTableData[0].id);
+      setCurrentContact(currentTableData[0]);
+    }
+  }, [currentTableData]);
+
   useEffect(() => {
     lastPage % fetchNextPage == 0 && listContacts();
   }, [currentPage]);
@@ -99,11 +107,13 @@ const Contacts = (props: ContactsProps) => {
                   setConversationId={handleConversationId}
                   setEditModeOn={handleEditMode}
                   setCancelEdit={handleCancelEditing}
+                  setCurrentVisibleContactId={setCurrentVisibleContactId}
+                  currentVisibleContactId={currentVisibleContactId}
                 />
               ))}
             </div>
           </div>
-          <div style={{marginLeft: '32px', marginRight: '32px', marginBottom: '32px'}}>
+          <div className={styles.paginationContainer}>
             <Pagination
               totalCount={paginationData?.total}
               pageSize={listPageSize}
@@ -114,13 +124,15 @@ const Contacts = (props: ContactsProps) => {
           </div>
         </div>
       </div>
-      <div className={contactInformationVisible ? styles.animateIn : ''}>
+      <div className={contactInformationVisible ? styles.contactColumnAnimateIn : styles.contactColumnAnimateOut}>
         <ContactInformation
           conversationId={conversationId}
           contact={currentContact}
           editModeOn={editModeOn}
           setEditModeOn={handleEditMode}
           cancelEdit={cancelEdit}
+          setContactInformationVisible={setContactInformationVisible}
+          contactInformationVisible={contactInformationVisible}
         />
       </div>
     </>

frontend/inbox/src/pages/Inbox/Messenger/ConversationMetadata/index.tsx

@@ -9,7 +9,7 @@ import ColorSelector from '../../../../components/ColorSelector';
 import Dialog from '../../../../components/Dialog';
 import {StateModel, isComponentHealthy} from '../../../../reducers';
 import {useAnimation} from 'render';
-import ContactDetails from './ContactDetails';
+import ContactDetails from '../../../../components/ContactDetails';
 
 import styles from './index.module.scss';
 import Tag from '../../../../components/Tag';

lib/typescript/assets/scss/animations.scss

@@ -99,3 +99,16 @@
     transform: translateX(0px);
   }
 }
+
+@keyframes contactsInformationOut {
+  0% {
+    opacity: 1;
+    transform: translateX(0px);
+    width: 290px;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(300px);
+    width: 0;
+  }
+}