From 7e50e119aea608960f058ddf24c98ad0db42a2b2 Mon Sep 17 00:00:00 2001
From: Akansha Sakhre <asakhre2002@gmail.com>
Date: Thu, 12 Dec 2024 20:36:14 +0530
Subject: [PATCH] Revert "WhatsApp group fields UI"

---
 src/containers/List/List.module.css           |   5 +-
 src/containers/List/List.tsx                  |  57 +++++--
 .../ContactDescription/ContactDescription.tsx | 161 +++++++-----------
 .../GroupDetails.tsx/GroupDetails.module.css  |  75 --------
 .../GroupDetails.tsx/GroupDetails.tsx         | 114 ++++---------
 src/graphql/queries/WaGroups.ts               |  14 +-
 src/i18n/en/en.json                           |   3 +-
 7 files changed, 142 insertions(+), 287 deletions(-)

diff --git a/src/containers/List/List.module.css b/src/containers/List/List.module.css
index 18c6fada2..36d76cad8 100644
--- a/src/containers/List/List.module.css
+++ b/src/containers/List/List.module.css
@@ -270,11 +270,8 @@
 }
 
 .ListContainer {
-  background-color: #f8faf5;
-}
-
-.FullHeight {
   height: 100vh;
+  background-color: #f8faf5;
 }
 
 .Checkbox {
diff --git a/src/containers/List/List.tsx b/src/containers/List/List.tsx
index 54742b58e..57b5926ab 100644
--- a/src/containers/List/List.tsx
+++ b/src/containers/List/List.tsx
@@ -227,7 +227,9 @@ export const List = ({
 
   // check if the user has access to manage collections
   const userRolePermissions = getUserRolePermissions();
-  const capitalListItemName = listItemName ? listItemName[0].toUpperCase() + listItemName.slice(1) : '';
+  const capitalListItemName = listItemName
+    ? listItemName[0].toUpperCase() + listItemName.slice(1)
+    : '';
 
   // function to get the default sorting set for columns
   const getDefaultSortColumn = (columnsFields: any) => {
@@ -331,9 +333,12 @@ export const List = ({
   let l;
 
   if (countQuery) {
-    [, { data: countData, error: e, loading: l, refetch: refetchCount }] = useLazyQuery(countQuery, {
-      variables: { filter },
-    });
+    [, { data: countData, error: e, loading: l, refetch: refetchCount }] = useLazyQuery(
+      countQuery,
+      {
+        variables: { filter },
+      }
+    );
   }
 
   // Get item data here
@@ -343,7 +348,8 @@ export const List = ({
   });
 
   // Get item data here
-  const [fetchUserCollections, { loading: loadingCollections, data: userCollections }] = useLazyQuery(GET_CURRENT_USER);
+  const [fetchUserCollections, { loading: loadingCollections, data: userCollections }] =
+    useLazyQuery(GET_CURRENT_USER);
 
   const checkUserRole = () => {
     userRole = getUserRole();
@@ -454,7 +460,9 @@ export const List = ({
     const { component, props } = useDelete(dialogMessage);
     dialogBox = (
       <DialogBox
-        title={dialogTitle || `Are you sure you want to delete the ${listItemName} "${deleteItemName}"?`}
+        title={
+          dialogTitle || `Are you sure you want to delete the ${listItemName} "${deleteItemName}"?`
+        }
         handleCancel={closeDialogBox}
         colorOk="warning"
         alignButtons="center"
@@ -520,7 +528,11 @@ export const List = ({
 
     const deleteButton = (Id: any, text: string) =>
       allowedAction.delete ? (
-        <div aria-label={t('Delete')} data-testid="DeleteIcon" onClick={() => showDialogHandler(Id, text)}>
+        <div
+          aria-label={t('Delete')}
+          data-testid="DeleteIcon"
+          onClick={() => showDialogHandler(Id, text)}
+        >
           <div className={styles.IconWithText}>
             <DeleteIcon className={styles.IconSize} />
             <div className={styles.TextButton}>Delete</div>
@@ -580,7 +592,9 @@ export const List = ({
                     <div>
                       {actionListMap(item, actionsInsideMore, true)}
                       <Divider className={styles.Divider}></Divider>
-                      <MenuItem className={styles.MenuItem}>{deleteButton(id, labelValue)}</MenuItem>
+                      <MenuItem className={styles.MenuItem}>
+                        {deleteButton(id, labelValue)}
+                      </MenuItem>
                     </div>
                   </Menu>
                 </Backdrop>
@@ -605,7 +619,9 @@ export const List = ({
                 if (event.target.checked) {
                   checkbox?.setSelectedItems([...checkbox?.selectedItems, listItem]);
                 } else {
-                  checkbox?.setSelectedItems(checkbox?.selectedItems.filter((item: any) => item.id !== listItem.id));
+                  checkbox?.setSelectedItems(
+                    checkbox?.selectedItems.filter((item: any) => item.id !== listItem.id)
+                  );
                 }
               }}
             />
@@ -680,7 +696,8 @@ export const List = ({
         <div>{t('Sorry, no results found! Please try a different search.')}</div>
       ) : (
         <div>
-          There are no {noItemText || listItemName}s right now. {button.show && t('Please create one.')}
+          There are no {noItemText || listItemName}s right now.{' '}
+          {button.show && t('Please create one.')}
         </div>
       )}
     </div>
@@ -692,7 +709,10 @@ export const List = ({
       {
         label: (
           <Checkbox
-            checked={checkbox?.selectedItems.length !== 0 && checkbox?.selectedItems.length === itemList.length}
+            checked={
+              checkbox?.selectedItems.length !== 0 &&
+              checkbox?.selectedItems.length === itemList.length
+            }
             onChange={(event) => {
               if (event.target.checked) {
                 checkbox?.setSelectedItems(data[listItem]);
@@ -754,7 +774,12 @@ export const List = ({
       );
     } else if (!button.link) {
       buttonContent = (
-        <Button color="primary" variant="contained" onClick={() => setNewItem(true)} data-testid="newItemButton">
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={() => setNewItem(true)}
+          data-testid="newItemButton"
+        >
           {button.symbol} {button.label}
         </Button>
       );
@@ -790,14 +815,18 @@ export const List = ({
   ) : null;
 
   return (
-    <div className={`${showHeader ? styles.FullHeight : ''} ${styles.ListContainer}`}>
+    <div className={styles.ListContainer}>
       {showHeader && (
         <>
           <div className={styles.Header} data-testid="listHeader">
             <div>
               <div className={styles.Title}>
                 {backLink && (
-                  <BackIcon onClick={() => navigate(backLink)} className={styles.BackLink} data-testid="back-button" />
+                  <BackIcon
+                    onClick={() => navigate(backLink)}
+                    className={styles.BackLink}
+                    data-testid="back-button"
+                  />
                 )}
                 <div className={styles.TitleText}> {title}</div>
                 {helpData && <HelpIcon helpData={helpData} />}
diff --git a/src/containers/Profile/Contact/ContactDescription/ContactDescription.tsx b/src/containers/Profile/Contact/ContactDescription/ContactDescription.tsx
index 29e798c29..a2ff34aa7 100644
--- a/src/containers/Profile/Contact/ContactDescription/ContactDescription.tsx
+++ b/src/containers/Profile/Contact/ContactDescription/ContactDescription.tsx
@@ -9,14 +9,12 @@ import styles from './ContactDescription.module.css';
 
 export interface ContactDescriptionProps {
   fields: any;
-  settings?: any;
-  phone?: string;
-  maskedPhone?: string;
+  settings: any;
+  phone: string;
+  maskedPhone: string;
   collections: any;
-  lastMessage?: string;
-  statusMessage?: string;
-  groups?: boolean;
-  customStyles?: string;
+  lastMessage: string;
+  statusMessage: string;
 }
 
 export const ContactDescription = ({
@@ -27,15 +25,17 @@ export const ContactDescription = ({
   statusMessage,
   fields,
   settings,
-  groups = false,
-  customStyles,
 }: ContactDescriptionProps) => {
   const [showPlainPhone, setShowPlainPhone] = useState(false);
   const { t } = useTranslation();
 
   // list of collections that the contact is assigned
   let assignedToCollection: any = Array.from(
-    new Set([].concat(...collections.map((collection: any) => collection.users.map((user: any) => user.name))))
+    new Set(
+      [].concat(
+        ...collections.map((collection: any) => collection.users.map((user: any) => user.name))
+      )
+    )
   );
 
   if (assignedToCollection.length > 2) {
@@ -49,19 +49,16 @@ export const ContactDescription = ({
   // list of collections that the contact belongs
   const collectionList = collections.map((collection: any) => collection.label).join(', ');
 
-  let collectionDetails = [{ label: t('Collections'), value: collectionList || t('None') }];
-  if (!groups) {
-    collectionDetails = [
-      ...collectionDetails,
-      {
-        label: t('Assigned to'),
-        value: assignedToCollection || t('None'),
-      },
-    ];
-  }
+  const collectionDetails = [
+    { label: t('Collections'), value: collectionList || t('None') },
+    {
+      label: t('Assigned to'),
+      value: assignedToCollection || t('None'),
+    },
+  ];
 
   let settingsValue: any = '';
-  if (settings && typeof settings === 'string') {
+  if (typeof settings === 'string') {
     settingsValue = JSON.parse(settings);
   }
 
@@ -113,30 +110,23 @@ export const ContactDescription = ({
     );
   }
 
-  const numberBlock = (
-    <>
-      {!groups && (
-        <>
-          <div className={styles.DetailBlock}>
-            <Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
-              Number
-            </Typography>
-            <div className={styles.Description}>
-              {phoneDisplay}
-              <div className={styles.SessionTimer}>
-                <span>{t('Session Timer')}</span>
-                <Timer time={lastMessage} variant="secondary" />
-              </div>
-            </div>
+  return (
+    <div className={styles.DescriptionContainer} data-testid="contactDescription">
+      <div className={styles.DetailBlock}>
+        <Typography data-testid="formLabel" variant="h5" className={styles.FieldLabel}>
+          Number
+        </Typography>
+        <div className={styles.Description}>
+          {phoneDisplay}
+          <div className={styles.SessionTimer}>
+            <span>{t('Session Timer')}</span>
+            <Timer time={lastMessage} variant="secondary" />
           </div>
-          <div className={styles.Divider} />
-        </>
-      )}
-    </>
-  );
+        </div>
+      </div>
+
+      <div className={styles.Divider} />
 
-  const collectionBlock = (
-    <>
       <div className={styles.DetailBlock}>
         {collectionDetails.map((collectionItem: any) => (
           <div key={collectionItem.label}>
@@ -149,65 +139,38 @@ export const ContactDescription = ({
       </div>
 
       <div className={styles.Divider} />
-    </>
-  );
-
-  const settingsBlock = (
-    <>
-      {settingsValue &&
-        !groups &&
-        typeof settingsValue === 'object' &&
-        Object.keys(settingsValue).map((key) => (
-          <div key={key}>
-            <div className={styles.FieldLabel}>{key}</div>
-            <div className={styles.DescriptionItemValue}>
-              {Object.keys(settingsValue[key])
-                .filter((settingKey) => settingsValue[key][settingKey] === true)
-                .join(', ')}
-            </div>
-            <div className={styles.Divider} />
-          </div>
-        ))}
-    </>
-  );
 
-  const statusBlock = (
-    <>
-      {!groups && (
-        <div className={styles.DetailBlock}>
-          <div>
-            <div className={styles.FieldLabel}>Status</div>
-            <div className={styles.DescriptionItemValue}>{statusMessage}</div>
-          </div>
-          <div className={styles.Divider} />
+      <div className={styles.DetailBlock}>
+        <div>
+          <div className={styles.FieldLabel}>Status</div>
+          <div className={styles.DescriptionItemValue}>{statusMessage}</div>
         </div>
-      )}
-    </>
-  );
-
-  const fieldsBlock = (
-    <div className={styles.DetailBlock}>
-      {fieldsValue &&
-        typeof fieldsValue === 'object' &&
-        Object.keys(fieldsValue).map((key) => (
-          <div key={key}>
-            <div className={styles.FieldLabel}>
-              {fieldsValue[key].label ? fieldsValue[key].label : key.replace('_', ' ')}
+        <div className={styles.Divider} />
+        {settingsValue &&
+          typeof settingsValue === 'object' &&
+          Object.keys(settingsValue).map((key) => (
+            <div key={key}>
+              <div className={styles.FieldLabel}>{key}</div>
+              <div className={styles.DescriptionItemValue}>
+                {Object.keys(settingsValue[key])
+                  .filter((settingKey) => settingsValue[key][settingKey] === true)
+                  .join(', ')}
+              </div>
+              <div className={styles.Divider} />
             </div>
-            <div className={styles.DescriptionItemValue}>{fieldsValue[key].value}</div>
-            <div className={styles.Divider} />
-          </div>
-        ))}
-    </div>
-  );
-
-  return (
-    <div className={`${styles.DescriptionContainer} ${customStyles}`} data-testid="contactDescription">
-      {numberBlock}
-      {collectionBlock}
-      {settingsBlock}
-      {statusBlock}
-      {fieldsBlock}
+          ))}
+        {fieldsValue &&
+          typeof fieldsValue === 'object' &&
+          Object.keys(fieldsValue).map((key) => (
+            <div key={key}>
+              <div className={styles.FieldLabel}>
+                {fieldsValue[key].label ? fieldsValue[key].label : key.replace('_', ' ')}
+              </div>
+              <div className={styles.DescriptionItemValue}>{fieldsValue[key].value}</div>
+              <div className={styles.Divider} />
+            </div>
+          ))}
+      </div>
     </div>
   );
 };
diff --git a/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.module.css b/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.module.css
index a39403fd6..f1cf10b2f 100644
--- a/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.module.css
+++ b/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.module.css
@@ -65,78 +65,3 @@
   padding: 2px 8px;
   border-radius: 8px;
 }
-
-.Container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  background-color: #f8faf5;
-}
-
-.RightContainer {
-  height: 100%;
-  width: 100%;
-}
-
-.Drawer {
-  width: fit-content;
-  border-right: 1px solid #efefef;
-  height: calc(100vh - 110px) !important;
-}
-
-.Tab {
-  border-radius: 10px;
-  width: 200px;
-  height: 34px;
-  display: flex;
-  align-items: center;
-  margin: 2px 0;
-  padding: 0px !important;
-  font-weight: 400;
-  font-size: 14px;
-  color: #717971;
-  padding-left: 16px !important;
-}
-
-.Tab:hover {
-  background-color: #71797123;
-  cursor: pointer !important;
-}
-
-.ActiveTab {
-  font-weight: 700 !important;
-  color: #073f24 !important;
-  background-color: #cce6d0 !important;
-}
-
-.GroupHeader {
-  display: flex;
-  box-shadow: 0px 1px 1px 0px #00000029;
-  padding: 15px;
-  align-items: center;
-  gap: 1rem;
-}
-
-.GroupHeaderTitle {
-  font-size: 16px;
-  font-weight: 500;
-  color: #717971;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.GroupHeaderElements {
-  padding: 0.5rem 1rem;
-}
-
-.Table {
-  display: flex;
-}
-
-.BackGround {
-  background-color: #f8faf5 !important;
-  width: 100%;
-  height: 100%;
-
-}
\ No newline at end of file
diff --git a/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.tsx b/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.tsx
index e73cc46f1..b0f0596dd 100644
--- a/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.tsx
+++ b/src/containers/WaGroups/GroupDetails.tsx/GroupDetails.tsx
@@ -1,20 +1,20 @@
-import { useMutation, useQuery } from '@apollo/client';
-import { useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { List } from 'containers/List/List';
 import { useTranslation } from 'react-i18next';
-
 import CollectionIcon from 'assets/images/icons/Collection/Dark.svg?react';
+import styles from './GroupDetails.module.css';
+import { UPDATE_GROUP_CONTACT } from 'graphql/mutations/Group';
+import {
+  COUNT_COUNTACTS_WA_GROUPS,
+  GET_WA_GROUP,
+  LIST_CONTACTS_WA_GROUPS,
+} from 'graphql/queries/WaGroups';
 import DeleteIcon from 'assets/images/icons/Delete/Red.svg?react';
+import { useState } from 'react';
+import { useMutation, useQuery } from '@apollo/client';
 import { setNotification } from 'common/notification';
 import { DialogBox } from 'components/UI/DialogBox/DialogBox';
-import { Heading } from 'components/UI/Heading/Heading';
 import { Loading } from 'components/UI/Layout/Loading/Loading';
-import { AvatarDisplay } from 'components/UI/AvatarDisplay/AvatarDisplay';
-import { List } from 'containers/List/List';
-import { ContactDescription } from 'containers/Profile/Contact/ContactDescription/ContactDescription';
-import { UPDATE_GROUP_CONTACT } from 'graphql/mutations/Group';
-import { COUNT_COUNTACTS_WA_GROUPS, GET_WA_GROUP, LIST_CONTACTS_WA_GROUPS } from 'graphql/queries/WaGroups';
-import styles from './GroupDetails.module.css';
 
 export const GroupDetails = () => {
   const params = useParams();
@@ -22,22 +22,20 @@ export const GroupDetails = () => {
 
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [deleteVariables, setDeleteVariables] = useState<any>();
-  const [contentToShow, setContentToShow] = useState('members');
+
+  const { loading: groupDataLoading, data: groupData } = useQuery(GET_WA_GROUP, {
+    variables: {
+      waGroupId: params.id,
+    },
+  });
 
   const dialogTitle = 'Are you sure you want to remove this contact from the group?';
   const dialogMessage = 'The contact will no longer receive messages sent to this group';
 
-  const columnNames = [{ label: t('Contact') }, { label: 'All WhatsApp Groups' }, { label: t('Actions') }];
-
-  const list = [
-    {
-      name: t('Members'),
-      section: 'members',
-    },
-    {
-      name: t('Details'),
-      section: 'details',
-    },
+  const columnNames = [
+    { label: t('Contact') },
+    { label: 'All WhatsApp Groups' },
+    { label: t('Actions') },
   ];
 
   const [removeContact, { loading }] = useMutation(UPDATE_GROUP_CONTACT, {
@@ -47,14 +45,6 @@ export const GroupDetails = () => {
     },
   });
 
-  const { loading: groupDataLoading, data } = useQuery(GET_WA_GROUP, {
-    variables: {
-      waGroupId: params.id,
-    },
-  });
-
-  const groupData = data?.waGroup?.waGroup;
-
   const queries = {
     countQuery: COUNT_COUNTACTS_WA_GROUPS,
     filterItemsQuery: LIST_CONTACTS_WA_GROUPS,
@@ -151,19 +141,24 @@ export const GroupDetails = () => {
         alignButtons="center"
         buttonOkLoading={loading}
       >
-        <div className={styles.dialogText}>The contact will no longer receive messages sent to this group</div>
+        <div className={styles.dialogText}>
+          The contact will no longer receive messages sent to this group
+        </div>
       </DialogBox>
     );
   }
 
-  let contentBody;
-  if (contentToShow === 'members') {
-    contentBody = (
+  if (groupDataLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <>
       <List
         backLink={`/group/chat/${params.id}`}
         dialogTitle={dialogTitle}
         columnNames={columnNames}
-        title={groupData?.label}
+        title={groupData?.waGroup?.waGroup?.label}
         listItem="waGroupContact"
         listItemName="waGroupContact"
         searchParameter={['term']}
@@ -179,56 +174,7 @@ export const GroupDetails = () => {
         {...queries}
         {...columnAttributes}
         showSearch={false}
-        showHeader={false}
-        customStyles={styles.Table}
       />
-    );
-  } else {
-    contentBody = (
-      <ContactDescription
-        customStyles={styles.BackGround}
-        fields={groupData?.fields}
-        collections={groupData?.groups}
-        groups
-      />
-    );
-  }
-
-  const drawer = (
-    <div className={styles.Drawer}>
-      <div data-testid="profileHeader" className={styles.GroupHeader}>
-        <AvatarDisplay name={groupData?.label} />
-
-        <div className={styles.GroupHeaderTitle}>{groupData?.label}</div>
-      </div>
-      <div className={styles.GroupHeaderElements}>
-        {list.map((data: any, index: number) => {
-          return (
-            <div
-              key={index}
-              onClick={() => setContentToShow(data.section)}
-              className={`${styles.Tab} ${contentToShow === data.section ? styles.ActiveTab : ''}`}
-            >
-              {data.name}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-
-  if (groupDataLoading) {
-    return <Loading />;
-  }
-
-  return (
-    <>
-      <Heading formTitle={t('Group Details')} backLink={`/group/chat/${params.id}`} showHeaderHelp={false} />
-
-      <div className={styles.Container}>
-        {drawer}
-        <div className={styles.RightContainer}>{contentBody}</div>
-      </div>
       {dialog}
     </>
   );
diff --git a/src/graphql/queries/WaGroups.ts b/src/graphql/queries/WaGroups.ts
index 11727ffca..bce6e7051 100644
--- a/src/graphql/queries/WaGroups.ts
+++ b/src/graphql/queries/WaGroups.ts
@@ -56,7 +56,11 @@ export const GROUP_SEARCH_QUERY = gql`
 
 export const GROUP_SEARCH_MULTI_QUERY = gql`
   query WaSearchMulti($filter: WaSearchFilter!, $waGroupOpts: Opts!, $waMessageOpts: Opts!) {
-    searchMulti: waSearchMulti(filter: $filter, waGroupOpts: $waGroupOpts, waMessageOpts: $waMessageOpts) {
+    searchMulti: waSearchMulti(
+      filter: $filter
+      waGroupOpts: $waGroupOpts
+      waMessageOpts: $waMessageOpts
+    ) {
       groups: waGroups {
         bspId
         id
@@ -169,18 +173,10 @@ export const GET_WA_GROUP = gql`
         id
         lastCommunicationAt
         bspId
-        fields
         waManagedPhone {
           phone
           id
         }
-        groups {
-          id
-          label
-          users {
-            name
-          }
-        }
       }
     }
   }
diff --git a/src/i18n/en/en.json b/src/i18n/en/en.json
index 99e5e250c..6d041df3c 100644
--- a/src/i18n/en/en.json
+++ b/src/i18n/en/en.json
@@ -531,6 +531,5 @@
   "Add files to file search": "Add files to file search",
   "First name is required.": "First Name is required.",
   "Last name is required.": "Last name is required.",
-  "Failed": "Failed",
-  "Members": "Members"
+  "Failed": "Failed"
 }