From 15dd630f446c500318642077cc2e5995aa0c92a3 Mon Sep 17 00:00:00 2001 From: Stephen Hand Date: Fri, 15 Dec 2023 12:43:19 +0000 Subject: [PATCH 1/5] Add 'In progress' indicators & styling to contact search results, contact details & timeline contacts that are still drafts --- .../src/components/case/timeline/Timeline.tsx | 24 ++++++++++--- .../caseMergingBanners/AddToCaseBanner.tsx | 2 +- .../caseMergingBanners/CaseCreatedBanner.tsx | 2 +- .../ContactAddedToCaseBanner.tsx | 2 +- .../ContactRemovedFromCaseBanner.tsx | 2 +- .../components/contact/ContactDetailsHome.tsx | 33 +++++++++++++----- .../search/CasePreview/CaseHeader.tsx | 8 ++--- .../components/search/CasePreview/index.tsx | 17 ++++++---- .../search/ContactPreview/ContactHeader.tsx | 32 +++++++++++++---- .../search/ContactPreview/index.tsx | 34 +++++++++++-------- .../src/states/case/caseActivities.ts | 2 +- plugin-hrm-form/src/states/case/types.ts | 2 +- plugin-hrm-form/src/styles/HrmStyles.tsx | 2 +- .../styles.ts => styles/banners.ts} | 9 +++-- plugin-hrm-form/src/styles/search/index.tsx | 13 ++++--- .../src/translations/en-US/flexUI.json | 1 + 16 files changed, 124 insertions(+), 61 deletions(-) rename plugin-hrm-form/src/{components/caseMergingBanners/styles.ts => styles/banners.ts} (96%) diff --git a/plugin-hrm-form/src/components/case/timeline/Timeline.tsx b/plugin-hrm-form/src/components/case/timeline/Timeline.tsx index 030f87b4a0..80ad4da62c 100644 --- a/plugin-hrm-form/src/components/case/timeline/Timeline.tsx +++ b/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 = ({ 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 ( - + {date} {isConnectedCaseActivity(activity) && ( @@ -185,6 +192,13 @@ const Timeline: React.FC = ({ )} + {isConnectedCaseActivity(activity) && activity.isDraft && ( + + + + + + )} ); })} diff --git a/plugin-hrm-form/src/components/caseMergingBanners/AddToCaseBanner.tsx b/plugin-hrm-form/src/components/caseMergingBanners/AddToCaseBanner.tsx index 3102485d71..383a2fa15b 100644 --- a/plugin-hrm-form/src/components/caseMergingBanners/AddToCaseBanner.tsx +++ b/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; diff --git a/plugin-hrm-form/src/components/caseMergingBanners/CaseCreatedBanner.tsx b/plugin-hrm-form/src/components/caseMergingBanners/CaseCreatedBanner.tsx index 8dccb41c6c..dd4bb788ee 100644 --- a/plugin-hrm-form/src/components/caseMergingBanners/CaseCreatedBanner.tsx +++ b/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; diff --git a/plugin-hrm-form/src/components/caseMergingBanners/ContactAddedToCaseBanner.tsx b/plugin-hrm-form/src/components/caseMergingBanners/ContactAddedToCaseBanner.tsx index 2728dc0b87..05d2c23290 100644 --- a/plugin-hrm-form/src/components/caseMergingBanners/ContactAddedToCaseBanner.tsx +++ b/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'; type OwnProps = { taskId: string; diff --git a/plugin-hrm-form/src/components/caseMergingBanners/ContactRemovedFromCaseBanner.tsx b/plugin-hrm-form/src/components/caseMergingBanners/ContactRemovedFromCaseBanner.tsx index 1e6d4ad870..0c29a9359f 100644 --- a/plugin-hrm-form/src/components/caseMergingBanners/ContactRemovedFromCaseBanner.tsx +++ b/plugin-hrm-form/src/components/caseMergingBanners/ContactRemovedFromCaseBanner.tsx @@ -22,8 +22,8 @@ import { Close } from '@material-ui/icons'; import { HeaderCloseButton, HiddenText } from '../../styles/HrmStyles'; import selectContactByTaskSid from '../../states/contacts/selectContactByTaskSid'; import WarningIcon from './WarningIcon'; -import { BannerContainer, Text } from './styles'; import { closeRemovedFromCaseBannerAction } from '../../states/case/caseBanners'; +import { BannerContainer, Text } from '../../styles/banners'; type OwnProps = { taskId: string; diff --git a/plugin-hrm-form/src/components/contact/ContactDetailsHome.tsx b/plugin-hrm-form/src/components/contact/ContactDetailsHome.tsx index 88dcddffa0..6fa69b3f96 100644 --- a/plugin-hrm-form/src/components/contact/ContactDetailsHome.tsx +++ b/plugin-hrm-form/src/components/contact/ContactDetailsHome.tsx @@ -17,23 +17,23 @@ /* eslint-disable react/prop-types */ import React, { useEffect } from 'react'; import { format } from 'date-fns'; -import { Actions, Insights, Template, Icon } from '@twilio/flex-ui'; +import { Actions, Icon, Insights, Template } from '@twilio/flex-ui'; import { connect } from 'react-redux'; import { callTypes, isNonSaveable } from 'hrm-form-definitions'; import { Edit } from '@material-ui/icons'; import { Grid } from '@material-ui/core'; -import { Flex, Box, Row } from '../../styles/HrmStyles'; +import { Box, Flex, Row } from '../../styles/HrmStyles'; import { + ContactRawJson, CSAMReportEntry, - isS3StoredTranscript, + CustomITask, isS3StoredRecording, + isS3StoredTranscript, isTwilioStoredMedia, - ContactRawJson, - CustomITask, StandaloneITask, } from '../../types/types'; -import { ContactAddedFont, SectionActionButton, SectionValueText, ContactDetailsIcon } from '../../styles/search'; +import { ContactAddedFont, ContactDetailsIcon, SectionActionButton, SectionValueText } from '../../styles/search'; import ContactDetailsSection from './ContactDetailsSection'; import { SectionEntry, SectionEntryValue } from '../common/forms/SectionEntry'; import { channelTypes, isChatChannel, isVoiceChannel } from '../../states/DomainConstants'; @@ -43,8 +43,8 @@ import { ContactDetailsSections, ContactDetailsSectionsType } from '../common/Co import { RootState } from '../../states'; import { DetailsContext, toggleDetailSectionExpanded } from '../../states/contacts/contactDetails'; import { getPermissionsForContact, getPermissionsForViewingIdentifiers, PermissionActions } from '../../permissions'; -import { createDraft, ContactDetailsRoute } from '../../states/contacts/existingContacts'; -import { TranscriptSection, RecordingSection } from './MediaSection'; +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'; @@ -52,6 +52,8 @@ import { configurationBase, contactFormsBase, namespace } from '../../states/sto import { changeRoute, newOpenModalAction } from '../../states/routing/actions'; import { getCurrentTopmostRouteForTask } from '../../states/routing/getRoute'; import { isRouteWithContext } from '../../states/routing/types'; +import InfoIcon from '../caseMergingBanners/InfoIcon'; +import { BannerContainer, Text } from '../../styles/banners'; const formatResourceReferral = (referral: ResourceReferral) => { return ( @@ -148,6 +150,8 @@ const ContactDetailsHome: React.FC = function ({ rawJson, } = savedContact; + const isDraft = !savedContact.finalizedAt; + const { callType, categories } = rawJson; const auditMessage = (timestampText: string, workerSid: string, templateKey: string) => { @@ -263,7 +267,18 @@ const ContactDetailsHome: React.FC = function ({ {auditMessage(timeOfContact, createdBy, 'ContactDetails-ActionHeaderAdded')} {auditMessage(updatedAt, updatedBy, 'ContactDetails-ActionHeaderUpdated')} - + {isDraft && ( + + + + + +