diff --git a/src/common/utils.ts b/src/common/utils.ts index cc79362de..418061ab3 100644 --- a/src/common/utils.ts +++ b/src/common/utils.ts @@ -9,8 +9,9 @@ import { setAuthSession, renewAuthToken, } from 'services/AuthService'; -import { SIMULATOR_NUMBER_START } from './constants'; +import { SIMULATOR_NUMBER_START, STANDARD_DATE_TIME_FORMAT } from './constants'; import { setNotification } from './notification'; +import dayjs from 'dayjs'; export const isSimulator = (phone: string) => phone ? phone.startsWith(SIMULATOR_NUMBER_START) : false; @@ -238,3 +239,36 @@ export const slicedString = (string: string, length: number) => string?.length > length ? `${string.slice(0, length)}...` : string; export default getObject; + +export const getContactStatus = (contact: { + optinTime: any; + optoutTime: any; + optinMethod: any; + optoutMethod: any; + status: string; +}) => { + const { optinTime, optoutTime, optinMethod, optoutMethod, status } = contact; + + let optin = typeof optinTime === 'string'; + let optout = typeof optoutTime === 'string'; + + let optoutMethodString = ''; + let optinMethodString = ''; + let statusMessage = 'No optin or optout'; + + if (optinMethod) { + optinMethodString = `via ${optinMethod} on ${dayjs(optinTime).format(STANDARD_DATE_TIME_FORMAT)}`; + } + + if (optoutMethod) { + optoutMethodString = `via ${optoutMethod} on ${dayjs(optoutTime).format(STANDARD_DATE_TIME_FORMAT)}`; + } + + if (optout && status === 'INVALID') { + statusMessage = `Optout ${optoutMethodString}`; + } else if (optin) { + statusMessage = `Optin ${optinMethodString}`; + } + + return statusMessage; +}; diff --git a/src/containers/BlockContact/BlockContactList/BlockContact.test.helper.ts b/src/containers/BlockContact/BlockContactList/BlockContact.test.helper.ts index b122f1fe6..96b84b566 100644 --- a/src/containers/BlockContact/BlockContactList/BlockContact.test.helper.ts +++ b/src/containers/BlockContact/BlockContactList/BlockContact.test.helper.ts @@ -31,6 +31,10 @@ const contactSearchQuery = { }, ], status: 'BLOCKED', + optinTime: '2021-08-19T09:28:01Z', + optoutTime: null, + optinMethod: 'BSP', + optoutMethod: null, }, ], }, diff --git a/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.module.css b/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.module.css index 2ed4c0cfb..9cc0ea4ff 100644 --- a/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.module.css +++ b/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.module.css @@ -3,7 +3,8 @@ width: 25%; } -.Phone { +.Phone, +.Status { color: #555; font-size: 13px; font-weight: 500; @@ -39,4 +40,4 @@ font-size: 15px; font-weight: 400; line-height: 20px; -} +} \ No newline at end of file diff --git a/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx b/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx index 95dc828b2..f1d93128f 100644 --- a/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx +++ b/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx @@ -12,6 +12,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'; export interface CollectionContactListProps { title: string; @@ -31,12 +32,16 @@ const getCollections = (collections: Array) => ( ); -const getColumns = ({ name, maskedPhone, groups }: any) => ({ - label: getName(name, maskedPhone), - groups: getCollections(groups), -}); +const getColumns = (contact: any) => { + const { name, maskedPhone, groups } = contact; + return { + label: getName(name, maskedPhone), + status: getContactStatus(contact), + groups: getCollections(groups), + }; +}; -const columnStyles = [styles.Name, styles.Phone, styles.Actions]; +const columnStyles = [styles.Name, styles.Phone, styles.Status, styles.Actions]; const collectionIcon = ; const queries = { @@ -126,6 +131,7 @@ export const CollectionContactList = ({ const columnNames = [ { name: 'name', label: t('Beneficiary') }, + { label: 'Status' }, { label: t('All Collections') }, { label: t('Actions') }, ]; diff --git a/src/containers/Profile/Contact/ContactProfile.tsx b/src/containers/Profile/Contact/ContactProfile.tsx index 5aab87a2c..7527107da 100644 --- a/src/containers/Profile/Contact/ContactProfile.tsx +++ b/src/containers/Profile/Contact/ContactProfile.tsx @@ -1,14 +1,12 @@ import React, { useEffect, useState } from 'react'; import { useQuery } from '@apollo/client'; import { useParams } from 'react-router-dom'; -import dayjs from 'dayjs'; import { Box, Collapse } from '@mui/material'; import { useTranslation } from 'react-i18next'; import CollapseIcon from '../../../assets/images/icons/Collapse.svg?react'; import ExpandIcon from '../../../assets/images/icons/Expand.svg?react'; -import { STANDARD_DATE_TIME_FORMAT } from 'common/constants'; -import { getDisplayName } from 'common/utils'; +import { getContactStatus, getDisplayName } from 'common/utils'; import { getOrganizationServices } from 'services/AuthService'; import { GET_CONTACT_DETAILS, GET_CONTACT_PROFILES } from 'graphql/queries/Contact'; import { Loading } from 'components/UI/Layout/Loading/Loading'; @@ -49,7 +47,7 @@ export const ContactProfile = () => { const { contact } = data; const contactData = contact.contact; - const { phone, maskedPhone, status, groups, lastMessage, settings, activeProfile } = contactData; + const { phone, maskedPhone, groups, lastMessage, settings, activeProfile } = contactData; let { fields } = contactData; const contactDisplayName = getDisplayName(contact); @@ -67,29 +65,7 @@ export const ContactProfile = () => { } } - optin = typeof contactData.optinTime === 'string'; - optout = typeof contactData.optoutTime === 'string'; - - let optinMethod = ''; - if (contactData.optinMethod) { - optinMethod = `via ${contactData.optinMethod} on ${dayjs(contactData.optinTime).format( - STANDARD_DATE_TIME_FORMAT - )}`; - } - - let optoutMethod = ''; - if (contactData.optoutMethod) { - optoutMethod = `via ${contactData.optoutMethod} on ${dayjs(contactData.optoutTime).format( - STANDARD_DATE_TIME_FORMAT - )}`; - } - - let statusMessage = 'No optin or optout'; - if (optout && status === 'INVALID') { - statusMessage = `Optout ${optoutMethod}`; - } else if (optin) { - statusMessage = `Optin ${optinMethod}`; - } + const statusMessage = getContactStatus(contactData); const switchProfile = { selectedProfileId, diff --git a/src/graphql/queries/Contact.ts b/src/graphql/queries/Contact.ts index ee0f987ab..4daa18f97 100644 --- a/src/graphql/queries/Contact.ts +++ b/src/graphql/queries/Contact.ts @@ -12,6 +12,10 @@ export const CONTACT_SEARCH_QUERY = gql` label } status + optinTime + optoutTime + optinMethod + optoutMethod } } `; diff --git a/src/mocks/Contact.tsx b/src/mocks/Contact.tsx index ba653fe44..142188c4c 100644 --- a/src/mocks/Contact.tsx +++ b/src/mocks/Contact.tsx @@ -240,6 +240,10 @@ export const getContactsQuery = { maskedPhone: '9876**3211', groups: [], status: 'hsm', + optinMethod: 'BSP', + optinTime: '2024-04-04T12:13:30Z', + optoutMethod: null, + optoutTime: null, }, { id: '2', @@ -248,6 +252,10 @@ export const getContactsQuery = { maskedPhone: '9876**3211', groups: [], status: 'hsm', + optinMethod: 'BSP', + optinTime: '2024-04-04T12:13:30Z', + optoutMethod: null, + optoutTime: null, }, { id: '3', @@ -256,6 +264,10 @@ export const getContactsQuery = { maskedPhone: '9876**3211', groups: [], status: 'hsm', + optinMethod: 'BSP', + optinTime: '2024-04-04T12:13:30Z', + optoutMethod: null, + optoutTime: null, }, ], }, @@ -276,6 +288,10 @@ export const getContactsSearchQuery = { maskedPhone: '9876**3211', groups: [], status: 'hsm', + optinMethod: 'BSP', + optinTime: '2024-04-04T12:13:30Z', + optoutMethod: null, + optoutTime: null, }, ], }, @@ -303,6 +319,10 @@ export const getCollectionContactsQuery = (variables: any) => { }, ], status: 'SESSION', + optinMethod: 'BSP', + optinTime: '2024-04-04T12:13:30Z', + optoutMethod: null, + optoutTime: null, }, { id: '2', @@ -315,7 +335,11 @@ export const getCollectionContactsQuery = (variables: any) => { label: 'Default Collection', }, ], - status: 'SESSION', + status: 'INVALID', + optinMethod: 'BSP', + optinTime: null, + optoutMethod: null, + optoutTime: '2024-04-04T12:13:30Z', }, { id: '3', @@ -329,6 +353,10 @@ export const getCollectionContactsQuery = (variables: any) => { }, ], status: 'SESSION', + optinMethod: '', + optinTime: '2024-04-04T12:13:30Z', + optoutMethod: null, + optoutTime: null, }, ], },