diff --git a/src/common/utils.ts b/src/common/utils.ts index ea45e5e48..b3331c807 100644 --- 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 index 30dbab05e..c4d01819b 100644 --- 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 index 3b47a38c0..c7b5fc0be 100644 --- 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) => ( -
-
{label}
-
{phone}
-
-); +const getName = (contact: any, phone: string) => { + const displayName = getDisplayName(contact); + + return ( +
+
{displayName}
+
{phone}
+
+ ); +}; const getCollections = (collections: Array) => (
@@ -40,9 +44,9 @@ const getCollections = (collections: Array) => ( ); 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 index da4c41171..88c552767 100644 --- 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 index 28619ff89..c2dd5866b 100644 --- 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 index 529a42dfc..d8abb93d8 100644 --- 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==