Merge pull request #3085 from glific/contact-names

Made contact name consistent in collection list
glific · Sep 24, 2024 · 6fb541f · 6fb541f
2 parents 2c8b23d + aaf02fa
commit 6fb541f
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 19 deletions.
diff --git a/src/common/utils.ts b/src/common/utils.ts
@@ -176,7 +176,7 @@ export const getDisplayName = (contact: any) => {
     return contact.name || contact.maskedPhone;
   }
 
-  let displayName = '';
+  let displayName: string;
   let contactFields: any = {};
   try {
     contactFields = JSON.parse(contact.fields);
@@ -188,8 +188,10 @@ export const getDisplayName = (contact: any) => {
     displayName = contactFields.name.value;
   } else if (contact.name) {
     displayName = contact.name;
-  } else {
+  } else if (contact.maskedPhone) {
     displayName = contact.maskedPhone;
+  } else {
+    displayName = '';
   }
   return displayName;
 };

diff --git a/src/containers/Chat/ChatMessages/AddToCollection/AddToCollection.tsx b/src/containers/Chat/ChatMessages/AddToCollection/AddToCollection.tsx
@@ -2,14 +2,15 @@ import { useState } from 'react';
 import { useMutation, useQuery } from '@apollo/client';
 import { useTranslation } from 'react-i18next';
 
-import { setNotification } from 'common/notification';
 import { setVariables } from 'common/constants';
-import { GET_CONTACTS_LIST } from 'graphql/queries/Contact';
+import { setNotification } from 'common/notification';
+import { getDisplayName } from 'common/utils';
+import { SearchDialogBox } from 'components/UI/SearchDialogBox/SearchDialogBox';
 import {
   UPDATE_COLLECTION_CONTACTS,
   UPDATE_COLLECTION_WA_GROUP,
 } from 'graphql/mutations/Collection';
-import { SearchDialogBox } from 'components/UI/SearchDialogBox/SearchDialogBox';
+import { GET_CONTACTS_LIST } from 'graphql/queries/Contact';
 import { GET_WA_GROUPS } from 'graphql/queries/WaGroups';
 
 interface AddToCollectionProps {
@@ -24,7 +25,6 @@ export const AddToCollection = ({ collectionId, setDialog, groups }: AddToCollec
 
   let searchquery = groups ? GET_WA_GROUPS : GET_CONTACTS_LIST;
   let updateMutation = groups ? UPDATE_COLLECTION_WA_GROUP : UPDATE_COLLECTION_CONTACTS;
-  let entity = groups ? 'waGroups' : 'contacts';
 
   const { data: entityData } = useQuery(searchquery, {
     variables: groups
@@ -52,7 +52,16 @@ export const AddToCollection = ({ collectionId, setDialog, groups }: AddToCollec
   let entityOptions = [];
 
   if (entityData) {
-    entityOptions = entityData[entity];
+    if (groups) {
+      entityOptions = entityData.waGroups;
+    } else {
+      entityOptions = entityData.contacts.map((contact: any) => {
+        return {
+          ...contact,
+          name: getDisplayName(contact),
+        };
+      });
+    }
   }
 
   const handleCollectionAdd = (selectedContacts: any) => {

diff --git a/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx b/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx
@@ -17,7 +17,7 @@ import { useLazyQuery, useMutation } from '@apollo/client';
 import { setVariables } from 'common/constants';
 import { SearchDialogBox } from 'components/UI/SearchDialogBox/SearchDialogBox';
 import { Button } from 'components/UI/Form/Button/Button';
-import { getContactStatus } from 'common/utils';
+import { getContactStatus, getDisplayName } from 'common/utils';
 import { DialogBox } from 'components/UI/DialogBox/DialogBox';
 import { setNotification } from 'common/notification';
 
@@ -26,12 +26,16 @@ export interface CollectionContactListProps {
   descriptionBox?: any;
 }
 
-const getName = (label: string, phone: string) => (
-  <div>
-    <div className={styles.NameText}>{label}</div>
-    <div className={styles.Phone}>{phone}</div>
-  </div>
-);
+const getName = (contact: any, phone: string) => {
+  const displayName = getDisplayName(contact);
+
+  return (
+    <div>
+      <div className={styles.NameText}>{displayName}</div>
+      <div className={styles.Phone}>{phone}</div>
+    </div>
+  );
+};
 
 const getCollections = (collections: Array<any>) => (
   <div className={styles.CollectionsText}>
@@ -40,9 +44,9 @@ const getCollections = (collections: Array<any>) => (
 );
 
 const getColumns = (contact: any) => {
-  const { name, maskedPhone, groups } = contact;
+  const { maskedPhone, groups } = contact;
   return {
-    label: getName(name, maskedPhone),
+    label: getName(contact, maskedPhone),
     status: getContactStatus(contact),
     groups: getCollections(groups),
   };

diff --git a/src/graphql/queries/Contact.ts b/src/graphql/queries/Contact.ts
@@ -16,6 +16,7 @@ export const CONTACT_SEARCH_QUERY = gql`
       optoutTime
       optinMethod
       optoutMethod
+      fields
     }
   }
 `;
@@ -25,6 +26,7 @@ export const GET_CONTACTS_LIST = gql`
     contacts(filter: $filter, opts: $opts) {
       id
       name
+      fields
       groups {
         id
         label

diff --git a/src/mocks/Contact.tsx b/src/mocks/Contact.tsx
@@ -296,6 +296,7 @@ export const getContactsQuery = {
           optinTime: '2024-04-04T12:13:30Z',
           optoutMethod: null,
           optoutTime: null,
+          fields: '{}',
         },
         {
           id: '2',
@@ -308,6 +309,8 @@ export const getContactsQuery = {
           optinTime: '2024-04-04T12:13:30Z',
           optoutMethod: null,
           optoutTime: null,
+          fields:
+            '{"name":{"value":"fieldValue","type":"string","label":"name","inserted_at":"2024-09-12T14:28:00.680124Z"},"gender":{"value":"Female","type":"string","label":"gender","inserted_at":"2024-09-12T05:00:45.328093Z"},"age":{"value":40,"type":"string","label":"age","inserted_at":"2024-09-12T05:00:45.328093Z"}}',
         },
         {
           id: '3',
@@ -320,6 +323,7 @@ export const getContactsQuery = {
           optinTime: '2024-04-04T12:13:30Z',
           optoutMethod: null,
           optoutTime: null,
+          fields: '{}',
         },
       ],
     },
@@ -344,6 +348,7 @@ export const getContactsSearchQuery = {
           optinTime: '2024-04-04T12:13:30Z',
           optoutMethod: null,
           optoutTime: null,
+          fields: '{}',
         },
       ],
     },
@@ -375,6 +380,7 @@ export const getCollectionContactsQuery = (variables: any) => {
             optinTime: '2024-04-04T12:13:30Z',
             optoutMethod: null,
             optoutTime: null,
+            fields: '{}',
           },
           {
             id: '2',
@@ -392,6 +398,7 @@ export const getCollectionContactsQuery = (variables: any) => {
             optinTime: null,
             optoutMethod: null,
             optoutTime: '2024-04-04T12:13:30Z',
+            fields: '{}',
           },
           {
             id: '3',
@@ -409,6 +416,7 @@ export const getCollectionContactsQuery = (variables: any) => {
             optinTime: '2024-04-04T12:13:30Z',
             optoutMethod: null,
             optoutTime: null,
+            fields: '{}',
           },
         ],
       },
@@ -657,6 +665,7 @@ export const getExcludedContactsQuery = (excludeGroups: any) => ({
           ],
           id: '2',
           name: 'NGO Admin',
+          fields: '{}',
         },
         {
           __typename: 'Contact',
@@ -669,6 +678,8 @@ export const getExcludedContactsQuery = (excludeGroups: any) => ({
           ],
           id: '1',
           name: 'NGO Main Account',
+          fields:
+            '{"name":{"value":"value","type":"string","label":"name","inserted_at":"2024-09-12T14:28:00.680124Z"},"gender":{"value":"Female","type":"string","label":"gender","inserted_at":"2024-09-12T05:00:45.328093Z"},"age":{"value":40,"type":"string","label":"age","inserted_at":"2024-09-12T05:00:45.328093Z"}}',
         },
         {
           __typename: 'Contact',
@@ -686,6 +697,8 @@ export const getExcludedContactsQuery = (excludeGroups: any) => ({
           ],
           id: '3',
           name: 'NGO Manager',
+          fields:
+            '{"name":{"value":"","type":"string","label":"name","inserted_at":"2024-09-12T14:28:00.680124Z"},"gender":{"value":"Female","type":"string","label":"gender","inserted_at":"2024-09-12T05:00:45.328093Z"},"age":{"value":40,"type":"string","label":"age","inserted_at":"2024-09-12T05:00:45.328093Z"}}',
         },
       ],
     },

diff --git a/yarn.lock b/yarn.lock
@@ -5973,8 +5973,16 @@ streamx@^2.12.0, streamx@^2.12.5, streamx@^2.13.2, streamx@^2.14.0:
   optionalDependencies:
     bare-events "^2.2.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
-  name string-width-cjs
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -6068,7 +6076,14 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==