Merge pull request #2844 from glific/adding-optin-status

Added optin status in collection contacts list
glific · Apr 10, 2024 · 87983c1 · 87983c1
2 parents b24e90b + ed7e329
commit 87983c1
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 36 deletions.
diff --git 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
@@ -31,6 +31,10 @@ const contactSearchQuery = {
             },
           ],
           status: 'BLOCKED',
+          optinTime: '2021-08-19T09:28:01Z',
+          optoutTime: null,
+          optinMethod: 'BSP',
+          optoutMethod: null,
         },
       ],
     },

diff --git a/...iners/Collection/CollectionContact/CollectionContactList/CollectionContactList.module.css b/...iners/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;
-}
+}
diff --git 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<any>) => (
   </div>
 );
 
-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 = <CollectionIcon className={styles.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
@@ -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
@@ -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
@@ -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,
           },
         ],
       },