Fix TypeScript compilation errors in migrated components

Co-authored-by: stephenhand <[email protected]>

Author: Copilot

plugin-hrm-form/src/components/NavigableContainer/index.tsx

@@ -41,7 +41,7 @@ type Props = {
   onCloseModal?: () => void;
   focusPriority?: FocusTarget[];
   noOverflow?: boolean;
-} & StyledProps;
+} & Partial<StyledProps>;
 
 const NavigableContainer: React.FC<Props> = ({
   children,

plugin-hrm-form/src/components/case/caseOverview/EditCaseOverview.tsx

@@ -217,8 +217,8 @@ const EditCaseOverview: React.FC<EditCaseOverviewProps> = ({ task, can }) => {
       <NavigableContainer
         task={task}
         titleCode="Case-EditCaseOverview"
-        onGoBack={checkForEdits}
-        onCloseModal={checkForEdits}
+        onGoBack={() => checkForEdits(false)}
+        onCloseModal={() => checkForEdits(true)}
         data-testid="Case-EditCaseOverview"
       >
         <CaseSummaryEditHistory {...historyDetails} />

plugin-hrm-form/src/components/case/casePrint/CasePrintView.tsx

@@ -210,7 +210,11 @@ const CasePrintView: React.FC<OwnProps> = ({ task }) => {
     );
 
   return (
-    <NavigableContainer task={task} onGoBack={() => dispatch(RoutingActions.newGoBackAction(task.taskSid))}>
+    <NavigableContainer
+      task={task}
+      titleCode="Case-PrintView"
+      onGoBack={() => dispatch(RoutingActions.newGoBackAction(task.taskSid))}
+    >
       {loading || !sectionTypeNames.every(sectionName => sectionTimelines[sectionName]) || !contactTimeline ? (
         <CasePrintViewSpinner>
           <CircularProgress size={50} />

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

@@ -68,24 +68,25 @@ const FullTimelineView: React.FC<MyProps> = ({ task }: MyProps) => {
         task={task}
         titleCode="Case-Timeline-ModalTitle"
         titleValues={{ caseId }}
-        style={{ textAlign: 'center' }}
       >
-        <AddToCaseBanner task={task} />
-        <Timeline
-          taskSid={task.taskSid}
-          timelineId={MAIN_TIMELINE_ID}
-          pageSize={TIMELINE_PAGE_SIZE}
-          page={page}
-          titleCode="Case-Timeline-Title"
-        />
-        <p style={{ marginTop: '10px', fontStyle: 'italic' }}>
-          <Template
-            code="Case-Timeline-PaginationDescription"
-            from={page * TIMELINE_PAGE_SIZE + 1}
-            to={Math.min((page + 1) * TIMELINE_PAGE_SIZE, activityCount)}
-            total={activityCount}
+        <div style={{ textAlign: 'center' }}>
+          <AddToCaseBanner task={task} />
+          <Timeline
+            taskSid={task.taskSid}
+            timelineId={MAIN_TIMELINE_ID}
+            pageSize={TIMELINE_PAGE_SIZE}
+            page={page}
+            titleCode="Case-Timeline-Title"
           />
-        </p>
+          <p style={{ marginTop: '10px', fontStyle: 'italic' }}>
+            <Template
+              code="Case-Timeline-PaginationDescription"
+              from={page * TIMELINE_PAGE_SIZE + 1}
+              to={Math.min((page + 1) * TIMELINE_PAGE_SIZE, activityCount)}
+              total={activityCount}
+            />
+          </p>
+        </div>
         {activityCount > TIMELINE_PAGE_SIZE && (
           <Pagination
             pagesCount={Math.ceil(activityCount / TIMELINE_PAGE_SIZE)}

plugin-hrm-form/src/components/caseList/CaseList.tsx

@@ -28,6 +28,7 @@ import * as ListContent from '../../states/caseList/listContent';
 import { getHrmConfig } from '../../hrmConfig';
 import { selectCurrentTopmostRouteForTask } from '../../states/routing/getRoute';
 import { newCloseModalAction, newOpenModalAction } from '../../states/routing/actions';
+import { isContactRoute, ProfileRoute, AppRoutes, ContactRoute } from '../../states/routing/types';
 import ContactDetails from '../contact/ContactDetails';
 import { DetailsContext } from '../../states/contacts/contactDetails';
 import selectCasesForList from '../../states/caseList/selectCasesForList';
@@ -94,12 +95,13 @@ const CaseList: React.FC = () => {
     );
   }
 
-  if (routing.route === 'contact') {
+  if (routing.route === 'contact' && isContactRoute(routing as AppRoutes)) {
+    const contactRoute = routing as ContactRoute;
     return (
       <StandaloneContainer>
         <CaseLayout>
           <ContactDetails
-            contactId={routing.id}
+            contactId={contactRoute.id}
             enableEditing={true}
             context={DetailsContext.CASE_DETAILS}
             task={standaloneTask}
@@ -109,7 +111,7 @@ const CaseList: React.FC = () => {
     );
   }
 
-  if (isProfileRoute(routing)) {
+  if (isProfileRoute(routing as AppRoutes)) {
     return (
       <StandaloneContainer>
         <ProfileRouter task={standaloneTask} />

plugin-hrm-form/src/components/search/SearchResults/SearchResultsQueryTemplate.tsx

@@ -19,10 +19,10 @@ import { Template } from '@twilio/flex-ui';
 
 import { RootState } from '../../../states';
 import { Bold, FontOpenSans } from '../../../styles';
-import { CustomITask } from '../../../types/types';
+import { CustomITask, StandaloneITask } from '../../../types/types';
 
 type SearchResultsQueryTemplateProps = {
-  task: CustomITask;
+  task: CustomITask | StandaloneITask;
   searchContext: any;
   subroute: string;
   casesCount: number;

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

@@ -23,7 +23,7 @@ import { AnyAction } from 'redux';
 
 import ContactPreview from '../ContactPreview';
 import CasePreview from '../CasePreview';
-import { Contact, CustomITask, SearchCaseResult, SearchContactResult } from '../../../types/types';
+import { Contact, CustomITask, StandaloneITask, SearchCaseResult, SearchContactResult } from '../../../types/types';
 import { Row } from '../../../styles';
 import {
   NoResultTextLink,
@@ -60,7 +60,7 @@ export const CONTACTS_PER_PAGE = 20;
 export const CASES_PER_PAGE = 20;
 
 type Props = {
-  task: CustomITask;
+  task: CustomITask | StandaloneITask;
   searchContactsResults: SearchContactResult;
   searchCasesResults: SearchCaseResult;
   onlyDataContacts: boolean;
@@ -69,7 +69,7 @@ type Props = {
   handleSearchCases: (offset: number) => void;
   toggleNonDataContacts: () => void;
   toggleClosedCases: () => void;
-  handleBack: () => void;
+  handleBack?: () => void;
   saveUpdates: () => Promise<void>;
 };
 

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

@@ -180,7 +180,6 @@ const Search: React.FC<Props> = ({ task, currentIsCaller = false, saveUpdates })
             >
               <SearchResults
                 task={task}
-                currentIsCaller={currentIsCaller}
                 searchContactsResults={searchContactsResults}
                 searchCasesResults={searchCasesResults}
                 onlyDataContacts={searchParams.onlyDataContacts}