From 903684d0e369453c01c99d9ac898e5729f53e0b1 Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Tue, 9 Apr 2024 12:27:46 +0530 Subject: [PATCH 1/4] added optin status --- .../CollectionContactList.module.css | 5 +- .../CollectionContactList.tsx | 48 +++++++++++++++++-- src/graphql/queries/Contact.ts | 4 ++ 3 files changed, 52 insertions(+), 5 deletions(-) diff --git a/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.module.css b/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.module.css index 2ed4c0cfb1..9cc0ea4ff3 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 95dc828b27..0d429aa0df 100644 --- a/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx +++ b/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx @@ -9,9 +9,10 @@ import CollectionIcon from 'assets/images/icons/Collection/Dark.svg?react'; import { List } from 'containers/List/List'; import styles from './CollectionContactList.module.css'; import { useLazyQuery, useMutation } from '@apollo/client'; -import { setVariables } from 'common/constants'; +import { STANDARD_DATE_TIME_FORMAT, setVariables } from 'common/constants'; import { SearchDialogBox } from 'components/UI/SearchDialogBox/SearchDialogBox'; import { Button } from 'components/UI/Form/Button/Button'; +import dayjs from 'dayjs'; export interface CollectionContactListProps { title: string; @@ -30,13 +31,53 @@ const getCollections = (collections: Array) => ( {collections.map((collection: any) => collection.label).join(', ')} ); +const getStatus = ( + optinTime: any, + optoutTime: any, + optinMethod: any, + optoutMethod: any, + status: string +) => { + let optin = typeof optinTime === 'string'; + let optout = typeof optoutTime === 'string'; + + let optoutMethodString = ''; + let optinMethodString = ''; + + 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)}`; + } + + let statusMessage = 'No optin or optout'; + if (optout && status === 'INVALID') { + statusMessage = `Optout ${optoutMethodString}`; + } else if (optin) { + statusMessage = `Optin ${optinMethodString}`; + } + + return statusMessage; +}; -const getColumns = ({ name, maskedPhone, groups }: any) => ({ +const getColumns = ({ + name, + maskedPhone, + groups, + optinTime, + optoutTime, + optinMethod, + optoutMethod, + status, +}: any) => ({ label: getName(name, maskedPhone), + status: getStatus(optinTime, optoutTime, optinMethod, optoutMethod, status), 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 +167,7 @@ export const CollectionContactList = ({ const columnNames = [ { name: 'name', label: t('Beneficiary') }, + { label: 'Status' }, { label: t('All Collections') }, { label: t('Actions') }, ]; diff --git a/src/graphql/queries/Contact.ts b/src/graphql/queries/Contact.ts index ee0f987abf..4daa18f97a 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 } } `; From 6248ca41213da705814ce14d7e8bfdb48c5cc66f Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Tue, 9 Apr 2024 12:58:40 +0530 Subject: [PATCH 2/4] refactored the code --- src/common/utils.ts | 34 +++++++++++++++++- .../CollectionContactList.tsx | 36 ++----------------- .../Profile/Contact/ContactProfile.tsx | 34 +++++------------- src/mocks/Contact.tsx | 12 +++++++ 4 files changed, 56 insertions(+), 60 deletions(-) diff --git a/src/common/utils.ts b/src/common/utils.ts index cc79362de1..6162fe325a 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,34 @@ export const slicedString = (string: string, length: number) => string?.length > length ? `${string.slice(0, length)}...` : string; export default getObject; + +export const getContactStatus = ( + optinTime: any, + optoutTime: any, + optinMethod: any, + optoutMethod: any, + status: string +) => { + 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/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx b/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx index 0d429aa0df..4c942dee97 100644 --- a/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx +++ b/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx @@ -9,10 +9,10 @@ import CollectionIcon from 'assets/images/icons/Collection/Dark.svg?react'; import { List } from 'containers/List/List'; import styles from './CollectionContactList.module.css'; import { useLazyQuery, useMutation } from '@apollo/client'; -import { STANDARD_DATE_TIME_FORMAT, setVariables } from 'common/constants'; +import { setVariables } from 'common/constants'; import { SearchDialogBox } from 'components/UI/SearchDialogBox/SearchDialogBox'; import { Button } from 'components/UI/Form/Button/Button'; -import dayjs from 'dayjs'; +import { getContactStatus } from 'common/utils'; export interface CollectionContactListProps { title: string; @@ -31,36 +31,6 @@ const getCollections = (collections: Array) => ( {collections.map((collection: any) => collection.label).join(', ')} ); -const getStatus = ( - optinTime: any, - optoutTime: any, - optinMethod: any, - optoutMethod: any, - status: string -) => { - let optin = typeof optinTime === 'string'; - let optout = typeof optoutTime === 'string'; - - let optoutMethodString = ''; - let optinMethodString = ''; - - 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)}`; - } - - let statusMessage = 'No optin or optout'; - if (optout && status === 'INVALID') { - statusMessage = `Optout ${optoutMethodString}`; - } else if (optin) { - statusMessage = `Optin ${optinMethodString}`; - } - - return statusMessage; -}; const getColumns = ({ name, @@ -73,7 +43,7 @@ const getColumns = ({ status, }: any) => ({ label: getName(name, maskedPhone), - status: getStatus(optinTime, optoutTime, optinMethod, optoutMethod, status), + status: getContactStatus(optinTime, optoutTime, optinMethod, optoutMethod, status), groups: getCollections(groups), }); diff --git a/src/containers/Profile/Contact/ContactProfile.tsx b/src/containers/Profile/Contact/ContactProfile.tsx index 5aab87a2c8..635b67caae 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'; @@ -67,29 +65,13 @@ 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.optinTime, + contactData.optoutTime, + contactData.optinMethod, + contactData.optoutMethod, + status + ); const switchProfile = { selectedProfileId, diff --git a/src/mocks/Contact.tsx b/src/mocks/Contact.tsx index ba653fe446..8683af4d22 100644 --- a/src/mocks/Contact.tsx +++ b/src/mocks/Contact.tsx @@ -303,6 +303,10 @@ export const getCollectionContactsQuery = (variables: any) => { }, ], status: 'SESSION', + optinMethod: 'BSP', + optinTime: '2024-04-04T12:13:30Z', + optoutMethod: null, + optoutTime: null, }, { id: '2', @@ -316,6 +320,10 @@ export const getCollectionContactsQuery = (variables: any) => { }, ], status: 'SESSION', + optinMethod: 'BSP', + optinTime: null, + optoutMethod: null, + optoutTime: '2024-04-04T12:13:30Z', }, { id: '3', @@ -329,6 +337,10 @@ export const getCollectionContactsQuery = (variables: any) => { }, ], status: 'SESSION', + optinMethod: '', + optinTime: '2024-04-04T12:13:30Z', + optoutMethod: null, + optoutTime: null, }, ], }, From 524a642ca34f3ba6bddece80f2c51fd2f2cd2925 Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Tue, 9 Apr 2024 13:11:58 +0530 Subject: [PATCH 3/4] refactored the code --- src/common/utils.ts | 16 ++++++++------ .../CollectionContactList.tsx | 22 +++++++------------ .../Profile/Contact/ContactProfile.tsx | 10 ++------- 3 files changed, 19 insertions(+), 29 deletions(-) diff --git a/src/common/utils.ts b/src/common/utils.ts index 6162fe325a..418061ab34 100644 --- a/src/common/utils.ts +++ b/src/common/utils.ts @@ -240,13 +240,15 @@ export const slicedString = (string: string, length: number) => export default getObject; -export const getContactStatus = ( - optinTime: any, - optoutTime: any, - optinMethod: any, - optoutMethod: any, - status: string -) => { +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'; diff --git a/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx b/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx index 4c942dee97..f1d93128f1 100644 --- a/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx +++ b/src/containers/Collection/CollectionContact/CollectionContactList/CollectionContactList.tsx @@ -32,20 +32,14 @@ const getCollections = (collections: Array) => ( ); -const getColumns = ({ - name, - maskedPhone, - groups, - optinTime, - optoutTime, - optinMethod, - optoutMethod, - status, -}: any) => ({ - label: getName(name, maskedPhone), - status: getContactStatus(optinTime, optoutTime, optinMethod, optoutMethod, status), - 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.Status, styles.Actions]; const collectionIcon = ; diff --git a/src/containers/Profile/Contact/ContactProfile.tsx b/src/containers/Profile/Contact/ContactProfile.tsx index 635b67caae..7527107dac 100644 --- a/src/containers/Profile/Contact/ContactProfile.tsx +++ b/src/containers/Profile/Contact/ContactProfile.tsx @@ -47,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); @@ -65,13 +65,7 @@ export const ContactProfile = () => { } } - const statusMessage = getContactStatus( - contactData.optinTime, - contactData.optoutTime, - contactData.optinMethod, - contactData.optoutMethod, - status - ); + const statusMessage = getContactStatus(contactData); const switchProfile = { selectedProfileId, From 5e23e65fed3c5f25673462027f4f7b14953f123b Mon Sep 17 00:00:00 2001 From: akanshaaaa19 Date: Tue, 9 Apr 2024 13:19:09 +0530 Subject: [PATCH 4/4] updated mocks --- .../BlockContact.test.helper.ts | 4 ++++ src/mocks/Contact.tsx | 18 +++++++++++++++++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/src/containers/BlockContact/BlockContactList/BlockContact.test.helper.ts b/src/containers/BlockContact/BlockContactList/BlockContact.test.helper.ts index b122f1fe60..96b84b5665 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/mocks/Contact.tsx b/src/mocks/Contact.tsx index 8683af4d22..142188c4cf 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, }, ], }, @@ -319,7 +335,7 @@ export const getCollectionContactsQuery = (variables: any) => { label: 'Default Collection', }, ], - status: 'SESSION', + status: 'INVALID', optinMethod: 'BSP', optinTime: null, optoutMethod: null,