CHI-2255: Draft status indicators

plugin-hrm-form/src/___tests__/states/case/caseActivities.test.ts

@@ -14,18 +14,20 @@
  * along with this program.  If not, see https://www.gnu.org/licenses/.
  */
 
-import { DefinitionVersionId, loadDefinition, useFetchDefinitions } from 'hrm-form-definitions';
+import { callTypes, DefinitionVersionId, loadDefinition, useFetchDefinitions } from 'hrm-form-definitions';
 
 import { Case, CaseInfo } from '../../../types/types';
 import { mockGetDefinitionsResponse } from '../../mockGetConfig';
 import { getDefinitionVersions } from '../../../hrmConfig';
 import { getActivitiesFromCase, getActivitiesFromContacts } from '../../../states/case/caseActivities';
+import { VALID_EMPTY_CONTACT } from '../../testContacts';
+import { Activity } from '../../../states/case/types';
 
 // eslint-disable-next-line react-hooks/rules-of-hooks
 const { mockFetchImplementation, mockReset, buildBaseURL } = useFetchDefinitions();
 
 const createFakeCase = (info: CaseInfo, connectedContacts: any[] = []): Case => ({
-  id: 0,
+  id: '0',
   status: 'borked',
   info: { definitionVersion: DefinitionVersionId.v1, ...info },
   helpline: 'Fakeline',
@@ -344,29 +346,31 @@ describe('getActivitiesFromContacts', () => {
 
     const activities = getActivitiesFromContacts([
       {
-        id: 1,
+        ...VALID_EMPTY_CONTACT,
+        id: '1',
         channel: 'facebook',
         timeOfContact,
         createdAt,
         twilioWorkerId: 'contact-adder',
         rawJson: {
+          ...VALID_EMPTY_CONTACT.rawJson,
           caseInformation: {
             callSummary: 'Child summary',
           },
         },
       },
     ]);
 
-    const expectedActivity = {
-      callType: undefined,
+    const expectedActivity: Activity = {
+      callType: callTypes.child,
       contactId: '1',
       date: timeOfContact,
       createdAt,
       type: 'facebook',
       text: 'Child summary',
       twilioWorkerId: 'contact-adder',
       channel: 'facebook',
-      showViewButton: false,
+      isDraft: true,
     };
 
     expect(activities).toStrictEqual([expectedActivity]);
@@ -376,23 +380,26 @@ describe('getActivitiesFromContacts', () => {
     const timeOfContact = '2021-01-07 10:00:00';
     const activities = getActivitiesFromContacts([
       {
-        id: 1,
+        ...VALID_EMPTY_CONTACT,
+        id: '1',
         channel: 'default',
         timeOfContact,
         createdAt,
         twilioWorkerId: 'contact-adder',
         rawJson: {
+          ...VALID_EMPTY_CONTACT.rawJson,
           callType: 'beep boop',
           caseInformation: {
             callSummary: 'Child summary',
           },
           contactlessTask: {
+            ...VALID_EMPTY_CONTACT.rawJson.contactlessTask,
             channel: 'facebook',
           },
         },
       },
     ]);
-    const expectedActivity = {
+    const expectedActivity: Activity = {
       callType: 'beep boop',
       contactId: '1',
       date: timeOfContact,
@@ -401,7 +408,7 @@ describe('getActivitiesFromContacts', () => {
       text: 'Child summary',
       twilioWorkerId: 'contact-adder',
       channel: 'facebook',
-      showViewButton: false,
+      isDraft: true,
     };
 
     expect(activities).toStrictEqual([expectedActivity]);
@@ -415,37 +422,43 @@ describe('getActivitiesFromContacts', () => {
 
     const activities = getActivitiesFromContacts([
       {
-        id: 1,
+        ...VALID_EMPTY_CONTACT,
+        id: '1',
         channel: 'facebook',
         timeOfContact,
         createdAt: contactCreatedAt,
         twilioWorkerId: 'contact-adder',
+        finalizedAt: contactCreatedAt,
         rawJson: {
+          ...VALID_EMPTY_CONTACT.rawJson,
           callType: 'beep boop',
           caseInformation: {
             callSummary: 'Child summary',
           },
         },
       },
       {
-        id: 0,
+        ...VALID_EMPTY_CONTACT,
+        id: '0',
         channel: 'default',
         timeOfContact: timeOfContactlessContact,
         createdAt: contactlessContactCreatedAt,
         twilioWorkerId: 'contact-adder',
         rawJson: {
+          ...VALID_EMPTY_CONTACT.rawJson,
           callType: 'boop beep',
           caseInformation: {
             callSummary: 'Child summary',
           },
           contactlessTask: {
+            ...VALID_EMPTY_CONTACT.rawJson.contactlessTask,
             channel: 'facebook',
           },
         },
       },
     ]);
 
-    const expectedActivities = [
+    const expectedActivities: Activity[] = [
       {
         callType: 'beep boop',
         contactId: '1',
@@ -455,6 +468,7 @@ describe('getActivitiesFromContacts', () => {
         text: 'Child summary',
         twilioWorkerId: 'contact-adder',
         channel: 'facebook',
+        isDraft: false,
       },
       {
         callType: 'boop beep',
@@ -465,6 +479,7 @@ describe('getActivitiesFromContacts', () => {
         text: 'Child summary',
         twilioWorkerId: 'contact-adder',
         channel: 'facebook',
+        isDraft: true,
       },
     ];
 

plugin-hrm-form/src/components/case/timeline/Timeline.tsx

@@ -25,7 +25,6 @@ import DialogContent from '@material-ui/core/DialogContent';
 import CallTypeIcon from '../../common/icons/CallTypeIcon';
 import TimelineIcon from './TimelineIcon';
 import {
-  CaseDetailsBorder,
   CaseSectionFont,
   TimelineCallTypeIcon,
   TimelineDate,
@@ -44,6 +43,8 @@ import { newOpenModalAction } from '../../../states/routing/actions';
 import { RootState } from '../../../states';
 import { selectCaseActivities } from '../../../states/case/timeline';
 import selectCurrentRouteCaseState from '../../../states/case/selectCurrentRouteCase';
+import { colors } from '../../../styles/banners';
+import InfoIcon from '../../caseMergingBanners/InfoIcon';
 
 type OwnProps = {
   taskSid: CustomITask['taskSid'];
@@ -158,16 +159,22 @@ const Timeline: React.FC<Props> = ({
           const date = parseISO(activity.date).toLocaleDateString(navigator.language);
           let canViewActivity = true;
           if (isConnectedCaseActivity(activity)) {
-            if (activity.showViewButton) {
+            if (activity.isDraft) {
+              canViewActivity = false;
+            } else {
               const { can } = getPermissionsForContact(activity.twilioWorkerId);
               canViewActivity = can(PermissionActions.VIEW_CONTACT);
-            } else {
-              canViewActivity = false;
             }
           }
 
           return (
-            <TimelineRow key={index}>
+            <TimelineRow
+              key={index}
+              style={{
+                backgroundColor:
+                  isConnectedCaseActivity(activity) && activity.isDraft ? colors.background.yellow : undefined,
+              }}
+            >
               <TimelineDate>{date}</TimelineDate>
               <TimelineIcon type={isConnectedCaseActivity(activity) ? activity.channel : activity.type} />
               {isConnectedCaseActivity(activity) && (
@@ -185,6 +192,13 @@ const Timeline: React.FC<Props> = ({
                   </Box>
                 </Box>
               )}
+              {isConnectedCaseActivity(activity) && activity.isDraft && (
+                <Box marginLeft="auto">
+                  <Box marginLeft="auto">
+                    <InfoIcon color="#fed44b" />
+                  </Box>
+                </Box>
+              )}
             </TimelineRow>
           );
         })}

plugin-hrm-form/src/components/caseMergingBanners/AddToCaseBanner.tsx

@@ -23,13 +23,13 @@ import { RootState } from '../../states';
 import selectCurrentRouteCaseState from '../../states/case/selectCurrentRouteCase';
 import { isStandaloneITask } from '../case/Case';
 import selectContactByTaskSid from '../../states/contacts/selectContactByTaskSid';
-import { BannerContainer, Text } from './styles';
 import { Flex } from '../../styles/HrmStyles';
 import InfoIcon from './InfoIcon';
 import ConnectToCaseButton from '../case/ConnectToCaseButton';
 import asyncDispatch from '../../states/asyncDispatch';
 import { connectToCaseAsyncAction } from '../../states/contacts/saveContact';
 import { newCloseModalAction } from '../../states/routing/actions';
+import { BannerContainer, Text } from '../../styles/banners';
 
 type MyProps = {
   task: CustomITask | StandaloneITask;

plugin-hrm-form/src/components/caseMergingBanners/CaseCreatedBanner.tsx

@@ -18,7 +18,6 @@ import React from 'react';
 import { connect, ConnectedProps } from 'react-redux';
 import { Template } from '@twilio/flex-ui';
 
-import { BannerContainer, Text, BannerActionLink } from './styles';
 import InfoIcon from './InfoIcon';
 import asyncDispatch from '../../states/asyncDispatch';
 import { removeFromCaseAsyncAction } from '../../states/contacts/saveContact';
@@ -28,6 +27,7 @@ import { cancelCaseAsyncAction } from '../../states/case/saveCase';
 import selectCaseStateByCaseId from '../../states/case/selectCaseStateByCaseId';
 import { showRemovedFromCaseBannerAction } from '../../states/case/caseBanners';
 import { CustomITask, StandaloneITask } from '../../types/types';
+import { BannerActionLink, BannerContainer, Text } from '../../styles/banners';
 
 type OwnProps = {
   task?: CustomITask | StandaloneITask;

plugin-hrm-form/src/components/caseMergingBanners/ContactAddedToCaseBanner.tsx

@@ -23,11 +23,11 @@ import asyncDispatch from '../../states/asyncDispatch';
 import { removeFromCaseAsyncAction } from '../../states/contacts/saveContact';
 import { newOpenModalAction } from '../../states/routing/actions';
 import type { Case } from '../../types/types';
-import { BannerContainer, Text, CaseLink, BannerActionLink } from './styles';
 import InfoIcon from './InfoIcon';
 import { showRemovedFromCaseBannerAction } from '../../states/case/caseBanners';
 import selectCaseByCaseId from '../../states/case/selectCaseStateByCaseId';
 import { RootState } from '../../states';
+import { BannerActionLink, BannerContainer, CaseLink, Text } from '../../styles/banners';
 import selectContactStateByContactId from '../../states/contacts/selectContactStateByContactId';
 
 type OwnProps = {

plugin-hrm-form/src/components/caseMergingBanners/ContactRemovedFromCaseBanner.tsx

@@ -20,9 +20,9 @@ import { Template } from '@twilio/flex-ui';
 import { Close } from '@material-ui/icons';
 
 import { HeaderCloseButton, HiddenText } from '../../styles/HrmStyles';
+import { BannerContainer, CaseLink, Text } from '../../styles/banners';
 import selectContactByTaskSid from '../../states/contacts/selectContactByTaskSid';
 import WarningIcon from './WarningIcon';
-import { BannerContainer, CaseLink, Text } from './styles';
 import { closeRemovedFromCaseBannerAction, selectCaseMergingBanners } from '../../states/case/caseBanners';
 import { Contact } from '../../types/types';
 import { connectToCaseAsyncAction } from '../../states/contacts/saveContact';
@@ -48,7 +48,7 @@ const mapStateToProps = (state: RootState, { taskId, contactId }: OwnProps) => {
   };
 };
 
-const mapDispatchToProps = (dispatch, { taskId }: OwnProps) => ({
+const mapDispatchToProps = dispatch => ({
   close: (contactId: string) => dispatch(closeRemovedFromCaseBannerAction(contactId)),
   connectCaseToTaskContact: async (taskContact: Contact, caseId: string) => {
     await asyncDispatch(dispatch)(connectToCaseAsyncAction(taskContact.id, caseId));

plugin-hrm-form/src/components/contact/ContactDetailsHome.tsx

@@ -55,6 +55,8 @@ import { isRouteWithContext } from '../../states/routing/types';
 import ContactAddedToCaseBanner from '../caseMergingBanners/ContactAddedToCaseBanner';
 import ContactRemovedFromCaseBanner from '../caseMergingBanners/ContactRemovedFromCaseBanner';
 import { selectCaseMergingBanners } from '../../states/case/caseBanners';
+import InfoIcon from '../caseMergingBanners/InfoIcon';
+import { BannerContainer, Text } from '../../styles/banners';
 
 const formatResourceReferral = (referral: ResourceReferral) => {
   return (
@@ -154,6 +156,8 @@ const ContactDetailsHome: React.FC<Props> = function ({
     caseId,
   } = savedContact;
 
+  const isDraft = !savedContact.finalizedAt;
+
   const { callType, categories } = rawJson;
 
   const auditMessage = (timestampText: string, workerSid: string, templateKey: string) => {
@@ -267,6 +271,18 @@ const ContactDetailsHome: React.FC<Props> = function ({
     <Box data-testid="ContactDetails-Container">
       {auditMessage(timeOfContact, createdBy, 'ContactDetails-ActionHeaderAdded')}
       {auditMessage(updatedAt, updatedBy, 'ContactDetails-ActionHeaderUpdated')}
+      {isDraft && (
+        <BannerContainer color="yellow" style={{ paddingTop: '12px', paddingBottom: '12px', marginTop: '10px' }}>
+          <Flex width="100%" justifyContent="space-between">
+            <Flex alignItems="center">
+              <InfoIcon color="#fed44b" />
+              <Text>
+                <Template code="Contact-DraftStatus" />
+              </Text>
+            </Flex>
+          </Flex>
+        </BannerContainer>
+      )}
 
       {caseId && <ContactAddedToCaseBanner taskId={task.taskSid} contactId={savedContact.id} />}
       {showRemovedFromCaseBanner && (

plugin-hrm-form/src/components/search/CasePreview/CaseHeader.tsx

@@ -21,11 +21,11 @@ import { Template } from '@twilio/flex-ui';
 import { FolderOutlined } from '@material-ui/icons';
 
 import {
-  SubtitleLabel,
-  SubtitleValue,
-  StyledLink,
   PreviewHeaderText,
   PreviewRow,
+  StyledLink,
+  SubtitleLabel,
+  SubtitleValue,
   SummaryText,
 } from '../../../styles/search';
 import { Flex } from '../../../styles/HrmStyles';
@@ -67,7 +67,7 @@ const CaseHeader: React.FC<Props> = ({
 
   return (
     <div>
-      <PreviewRow>
+      <PreviewRow style={{ paddingTop: '5px' }}>
         <Flex justifyContent="space-between" width="100%">
           <Flex alignItems="center" style={{ minWidth: 'fit-content' }}>
             {!isOrphanedCase && (

plugin-hrm-form/src/components/search/CasePreview/index.tsx

@@ -37,6 +37,7 @@ import { newCloseModalAction } from '../../../states/routing/actions';
 import { getPermissionsForCase, getPermissionsForContact, PermissionActions } from '../../../permissions';
 import { getAseloFeatureFlags } from '../../../hrmConfig';
 import { isNonDataCallType } from '../../../states/validationRules';
+import { PreviewRow } from '../../../styles/search';
 
 type OwnProps = {
   currentCase: Case;
@@ -136,13 +137,15 @@ const CasePreview: React.FC<Props> = ({
             closeModal();
           }}
         />
-        {summary && (
-          <PreviewDescription expandLinkText="ReadMore" collapseLinkText="ReadLess">
-            {summary}
-          </PreviewDescription>
-        )}
-
-        <TagsAndCounselor counselor={counselor} categories={categories} definitionVersion={definitionVersion} />
+        <PreviewRow>
+          {summary && (
+            <PreviewDescription expandLinkText="ReadMore" collapseLinkText="ReadLess">
+              {summary}
+            </PreviewDescription>
+          )}
+
+          <TagsAndCounselor counselor={counselor} categories={categories} definitionVersion={definitionVersion} />
+        </PreviewRow>
       </PreviewWrapper>
     </Flex>
   );