Merge pull request #2543 from techmatters/CHI-2763-resolve-contacts

CHI-2763 Resolve In-Progress Contacts: Close Tasks and Finalize Contacts

plugin-hrm-form/src/___tests__/callTypeButtons/NonDataCallTypeDialog.test.js

@@ -20,7 +20,7 @@ import { mount } from 'enzyme';
 import { StorelessThemeProvider } from '@twilio/flex-ui';
 
 import HrmTheme from '../../styles/HrmTheme';
-import NonDataCallTypeDialog from '../../components/callTypeButtons/NonDataCallTypeDialog';
+import SaveContactCallTypeDialog from '../../components/callTypeButtons/SaveContactCallTypeDialog';
 
 expect.extend(toHaveNoViolations);
 
@@ -31,7 +31,7 @@ test('a11y', async () => {
 
   const wrapper = mount(
     <StorelessThemeProvider themeConf={themeConf}>
-      <NonDataCallTypeDialog isOpen={true} handleConfirm={() => null} handleCancel={() => null} isCallTask={true} />
+      <SaveContactCallTypeDialog isOpen={true} handleConfirm={() => null} handleCancel={() => null} isCallTask={true} />
     </StorelessThemeProvider>,
   );
 

plugin-hrm-form/src/___tests__/search/Search.test.tsx

@@ -46,12 +46,23 @@ const { mockFetchImplementation, mockReset, buildBaseURL } = mockLocalFetchDefin
 const mockStore = configureMockStore([]);
 let mockV1;
 
+const mockFlexManager = {
+  workerClient: {
+    attributes: {
+      roles: [''],
+    },
+  },
+};
+
 jest.mock('../../services/ServerlessService', () => ({
   populateCounselors: async () => [],
 }));
 
 jest.mock('@twilio/flex-ui', () => ({
   ...(jest.requireActual('@twilio/flex-ui') as any),
+  Manager: {
+    getInstance: () => mockFlexManager,
+  },
   Actions: {
     invokeAction: jest.fn(),
   },
@@ -102,6 +113,7 @@ function createState(
       },
     ]),
   );
+
   return {
     'plugin-hrm-form': {
       configuration: {

plugin-hrm-form/src/components/callTypeButtons/CallTypeButtons.tsx

@@ -28,7 +28,7 @@ import { withLocalization } from '../../contexts/LocalizationContext';
 import { Box, Flex } from '../../styles';
 import { Container, DataCallTypeButton, Label, NonDataCallTypeButton } from './styles';
 import { isNonDataCallType } from '../../states/validationRules';
-import NonDataCallTypeDialog from './NonDataCallTypeDialog';
+import SaveContactCallTypeDialog from './SaveContactCallTypeDialog';
 import { hasTaskControl } from '../../transfer/transferTaskState';
 import { completeTask } from '../../services/formSubmissionHelpers';
 import CallTypeIcon from '../common/icons/CallTypeIcon';
@@ -174,7 +174,7 @@ const CallTypeButtons: React.FC<Props> = ({
             ))}
         </Box>
       </Container>
-      <NonDataCallTypeDialog
+      <SaveContactCallTypeDialog
         isOpen={isDialogOpen(task, draftContact)}
         isEnabled={loadingStatus === LoadingStatus.LOADED}
         isCallTask={!isOfflineContactTask(task) && isCallTask(task)}

plugin-hrm-form/src/components/callTypeButtons/NonDataCallTypeDialog.tsx → plugin-hrm-form/src/components/callTypeButtons/SaveContactCallTypeDialog.tsx

@@ -30,16 +30,16 @@ import TabPressWrapper from '../TabPressWrapper';
 
 type OwnProps = {
   isOpen: boolean;
-  isCallTask: boolean;
+  isCallTask?: boolean;
   isEnabled: boolean;
-  isInWrapupMode: boolean;
+  isInWrapupMode?: boolean;
   handleConfirm: () => Promise<any>;
   handleCancel: () => void;
 };
 
 type Props = OwnProps;
 
-const NonDataCallTypeDialog: React.FC<Props> = ({
+const SaveContactCallTypeDialog: React.FC<Props> = ({
   isOpen,
   isCallTask,
   isEnabled,
@@ -85,6 +85,6 @@ const NonDataCallTypeDialog: React.FC<Props> = ({
   </CloseTaskDialog>
 );
 
-NonDataCallTypeDialog.displayName = 'NonDataCallTypeDialog';
+SaveContactCallTypeDialog.displayName = 'SaveContactCallTypeDialog';
 
-export default NonDataCallTypeDialog;
+export default SaveContactCallTypeDialog;

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

@@ -27,7 +27,7 @@ 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';
+import { BannerContainer, BannerText } from '../../styles/banners';
 import selectContextContactId from '../../states/contacts/selectContextContactId';
 import selectContactStateByContactId from '../../states/contacts/selectContactStateByContactId';
 import { selectFirstContactByCaseId } from '../../states/contacts/selectContactByCaseId';
@@ -92,9 +92,9 @@ const AddToCaseBanner: React.FC<Props> = ({
       <Flex width="100%" justifyContent="space-between">
         <Flex alignItems="center">
           <InfoIcon color="#fed44b" />
-          <Text>
+          <BannerText>
             <Template code="CaseMerging-AddContactToCase" />
-          </Text>
+          </BannerText>
         </Flex>
         <ConnectToCaseButton
           caseId={connectedCase.id}

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

@@ -26,7 +26,7 @@ import { getOfflineContactTaskSid } from '../../states/contacts/offlineContactTa
 import { cancelCaseAsyncAction } from '../../states/case/saveCase';
 import { showRemovedFromCaseBannerAction } from '../../states/case/caseBanners';
 import { CustomITask, StandaloneITask } from '../../types/types';
-import { BannerActionLink, BannerContainer, Text } from '../../styles/banners';
+import { BannerAction, BannerContainer, BannerText } from '../../styles/banners';
 import { getInitializedCan, PermissionActions } from '../../permissions';
 import { selectContactsByCaseIdInCreatedOrder } from '../../states/contacts/selectContactByCaseId';
 import selectContactByTaskSid from '../../states/contacts/selectContactByTaskSid';
@@ -92,16 +92,16 @@ const CreatedCaseBanner: React.FC<Props> = ({
   return (
     <BannerContainer color="blue">
       <InfoIcon color="#001489" />
-      <Text>
+      <BannerText>
         <Template
           code={hasOtherContacts ? 'CaseMerging-ContactAddedToExistingCase' : 'CaseMerging-CaseCreatedAndContactAdded'}
           caseId={caseId}
         />
-      </Text>
+      </BannerText>
       {canRemoveContactsFromCase && (
-        <BannerActionLink type="button" onClick={handleCancelCase} data-fs-id="CancelNewCase-Button">
+        <BannerAction type="button" onClick={handleCancelCase} data-fs-id="CancelNewCase-Button">
           <Template code={hasOtherContacts ? 'CaseMerging-RemoveFromCase' : 'CaseMerging-CancelCase'} />
-        </BannerActionLink>
+        </BannerAction>
       )}
     </BannerContainer>
   );

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

@@ -26,7 +26,7 @@ import type { Case } from '../../types/types';
 import InfoIcon from './InfoIcon';
 import { showRemovedFromCaseBannerAction } from '../../states/case/caseBanners';
 import { RootState } from '../../states';
-import { BannerActionLink, BannerContainer, CaseLink, Text } from '../../styles/banners';
+import { BannerAction, BannerContainer, CaseLink, BannerText } from '../../styles/banners';
 import selectContactStateByContactId from '../../states/contacts/selectContactStateByContactId';
 import { getInitializedCan, PermissionActions } from '../../permissions';
 import { getHrmConfig } from '../../hrmConfig';
@@ -103,9 +103,9 @@ const ContactAddedToCaseBanner: React.FC<Props> = ({
   return (
     <BannerContainer color="blue">
       <InfoIcon color="#001489" />
-      <Text>
+      <BannerText>
         <Template code="CaseMerging-ContactAddedTo" />
-      </Text>
+      </BannerText>
       <CaseLink
         type="button"
         color={!canViewcase && '#000'}
@@ -117,9 +117,9 @@ const ContactAddedToCaseBanner: React.FC<Props> = ({
         {caseId}
       </CaseLink>
       {canEditAndRemoveCase && (
-        <BannerActionLink type="button" onClick={handleRemoveContactFromCase} data-fs-id="RemoveContactFromCase-Button">
+        <BannerAction type="button" onClick={handleRemoveContactFromCase} data-fs-id="RemoveContactFromCase-Button">
           <Template code="CaseMerging-RemoveFromCase" />
-        </BannerActionLink>
+        </BannerAction>
       )}
     </BannerContainer>
   );

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

@@ -21,7 +21,7 @@ import { Close } from '@material-ui/icons';
 
 import { HiddenText } from '../../styles';
 import { HeaderCloseButton } from '../../styles/buttons';
-import { BannerContainer, CaseLink, Text } from '../../styles/banners';
+import { BannerContainer, CaseLink, BannerText } from '../../styles/banners';
 import selectContactByTaskSid from '../../states/contacts/selectContactByTaskSid';
 import WarningIcon from './WarningIcon';
 import { closeRemovedFromCaseBannerAction, selectCaseMergingBanners } from '../../states/case/caseBanners';
@@ -85,9 +85,9 @@ const ContactRemovedFromCaseBanner: React.FC<Props> = ({
   return (
     <BannerContainer color="orange">
       <WarningIcon />
-      <Text>
+      <BannerText>
         <Template code="CaseMerging-ContactRemovedFromCase" />
-      </Text>
+      </BannerText>
       {canUndo && (
         <CaseLink
           onClick={() => {

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

@@ -15,28 +15,27 @@
  */
 
 /* eslint-disable react/prop-types */
-import React, { useEffect } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import { format } from 'date-fns';
 import { Actions, Icon, Insights, Template } from '@twilio/flex-ui';
 import { connect } from 'react-redux';
-import { callTypes, DataCallTypes, DefinitionVersionId, isNonSaveable } from 'hrm-form-definitions';
+import { callTypes, DataCallTypes, isNonSaveable } from 'hrm-form-definitions';
 import { Edit } from '@material-ui/icons';
 import { Grid } from '@material-ui/core';
 
 import { useProfile } from '../../states/profile/hooks';
-import { Box, Flex, Row } from '../../styles';
+import { Box, Flex } from '../../styles';
 import {
   Contact,
   ContactRawJson,
-  CSAMReportEntry,
   CustomITask,
   isS3StoredRecording,
   isS3StoredTranscript,
   isTwilioStoredMedia,
   RouterTask,
   StandaloneITask,
 } from '../../types/types';
-import { ContactAddedFont, ContactDetailsIcon, SectionActionButton, SectionValueText } from '../search/styles';
+import { ContactAddedFont, ContactDetailsIcon, SectionActionButton } from '../search/styles';
 import ContactDetailsSection from './ContactDetailsSection';
 import { SectionEntry, SectionEntryValue } from '../common/forms/SectionEntry';
 import { channelTypes, isChatChannel, isVoiceChannel } from '../../states/DomainConstants';
@@ -46,10 +45,9 @@ import { ContactDetailsSections, ContactDetailsSectionsType } from '../common/Co
 import { RootState } from '../../states';
 import { DetailsContext, toggleDetailSectionExpanded } from '../../states/contacts/contactDetails';
 import { getInitializedCan, PermissionActions } from '../../permissions';
-import { ContactDetailsRoute, ContactDraftChanges, createDraft } from '../../states/contacts/existingContacts';
+import { ContactDetailsRoute, createDraft } from '../../states/contacts/existingContacts';
 import { RecordingSection, TranscriptSection } from './MediaSection';
 import { newCSAMReportActionForContact } from '../../states/csam-report/actions';
-import type { ResourceReferral } from '../../states/contacts/resourceReferral';
 import { getAseloFeatureFlags, getTemplateStrings } from '../../hrmConfig';
 import { configurationBase, contactFormsBase, namespace } from '../../states/storeNamespaces';
 import { changeRoute, newOpenModalAction } from '../../states/routing/actions';
@@ -58,50 +56,12 @@ import { AppRoutes, 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';
 import { isSmsChannelType } from '../../utils/smsChannels';
 import getCanEditContact from '../../permissions/canEditContact';
-import { createCaseAsyncAction } from '../../states/case/saveCase';
-import asyncDispatch from '../../states/asyncDispatch';
-import { updateContactInHrmAsyncAction } from '../../states/contacts/saveContact';
 import AddCaseButton from '../AddCaseButton';
 import openNewCase from '../case/openNewCase';
-
-const formatResourceReferral = (referral: ResourceReferral) => {
-  return (
-    <Box marginBottom="5px">
-      <SectionValueText>
-        {referral.resourceName}
-        <br />
-        <Row>ID #{referral.resourceId}</Row>
-      </SectionValueText>
-    </Box>
-  );
-};
-
-const formatCsamReport = (report: CSAMReportEntry) => {
-  const template =
-    report.reportType === 'counsellor-generated' ? (
-      <Template code="CSAMReportForm-Counsellor-Attachment" />
-    ) : (
-      <Template code="CSAMReportForm-Self-Attachment" />
-    );
-
-  const date = `${format(new Date(report.createdAt), 'yyyy MM dd h:mm aaaaa')}m`;
-
-  return (
-    <Box marginBottom="5px">
-      <SectionValueText>
-        {template}
-        <br />
-        {date}
-        <br />
-        {`#${report.csamReportId}`}
-      </SectionValueText>
-    </Box>
-  );
-};
+import { formatCsamReport, formatResourceReferral } from './helpers';
+import ContactInProgressBanners from './ContactInProgressBanners';
 
 // TODO: complete this type
 type OwnProps = {
@@ -138,17 +98,16 @@ const ContactDetailsHome: React.FC<Props> = function ({
   createNewCase,
 }) {
   const version = savedContact?.rawJson.definitionVersion;
-
   const definitionVersion = definitionVersions[version];
-
   const featureFlags = getAseloFeatureFlags();
   const strings = getTemplateStrings();
 
   // Permission to edit is based the counselor who created the contact - identified by Twilio worker ID
-  const can = React.useMemo(() => {
+  const can = useMemo(() => {
     return action => getInitializedCan()(action, savedContact);
   }, [savedContact]);
-  const canEditContact = React.useMemo(() => getCanEditContact(savedContact), [savedContact]);
+
+  const canEditContact = useMemo(() => getCanEditContact(savedContact), [savedContact]);
 
   useEffect(
     () => () => {
@@ -328,19 +287,7 @@ 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>
-      )}
-
+      <ContactInProgressBanners savedContact={savedContact} task={task} />
       {renderCaseBanners()}
 
       <ContactDetailsSection