PIMS-2001: Add ERP date for general user projects (#2642)

Co-authored-by: Dylan Barkowsky <[email protected]>
bcgov · Aug 27, 2024 · 117fc0d · 117fc0d
1 parent da4195c
commit 117fc0d
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 75 deletions.
diff --git a/react-app/src/components/projects/EnhancedReferralDates.tsx b/react-app/src/components/projects/EnhancedReferralDates.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { DateField } from '@mui/x-date-pickers/DateField';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
+import { NotificationQueue } from '@/hooks/api/useProjectNotificationApi';
+import { NotificationType } from '@/constants/notificationTypes';
+
+interface EnhancedReferralDatesProps {
+  rows: NotificationQueue[];
+}
+
+const EnhancedReferralDates: React.FC<EnhancedReferralDatesProps> = ({ rows = [] }) => {
+  const initalERN = rows.find((row) => row.TemplateId === NotificationType.NEW_PROPERTIES_ON_ERP);
+  const thirtyDayERN = rows.find(
+    (row) => row.TemplateId === NotificationType.THIRTY_DAY_ERP_NOTIFICATION_OWNING_AGENCY,
+  );
+  const sixtyDayERN = rows.find(
+    (row) => row.TemplateId === NotificationType.SIXTY_DAY_ERP_NOTIFICATION_OWNING_AGENCY,
+  );
+  const nintyDayERN = rows.find(
+    (row) => row.TemplateId === NotificationType.NINTY_DAY_ERP_NOTIFICATION_OWNING_AGENCY,
+  );
+
+  const allErnNotificatonsFound = [initalERN, thirtyDayERN, sixtyDayERN, nintyDayERN].every(
+    (notification) => notification != undefined,
+  );
+
+  if (!allErnNotificatonsFound) return null;
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Box
+        gap={1}
+        display={'inline-flex'}
+        mb={3}
+        mt={2}
+        sx={{
+          '& .MuiInputBase-root.Mui-disabled': {
+            '& > fieldset': {
+              borderColor: 'rgba(0,0,0)',
+            },
+          },
+          '& .MuiFormLabel-root.MuiInputLabel-root': {
+            color: 'rgba(0, 0, 0)',
+          },
+          '& .MuiInputBase-input.MuiOutlinedInput-input.Mui-disabled': {
+            color: 'rgba(0,0,0)',
+            WebkitTextFillColor: 'rgba(0,0,0)',
+          },
+        }}
+      >
+        <DateField
+          disabled={true}
+          value={initalERN ? dayjs(initalERN.SendOn) : undefined}
+          label={'Initial Send Date'}
+          format={'LL'}
+        />
+        <DateField
+          disabled={true}
+          value={thirtyDayERN ? dayjs(thirtyDayERN.SendOn) : undefined}
+          label={'30-day Send Date'}
+          format={'LL'}
+        />
+        <DateField
+          disabled={true}
+          value={sixtyDayERN ? dayjs(sixtyDayERN.SendOn) : undefined}
+          label={'60-day Send Date'}
+          format={'LL'}
+        />
+        <DateField
+          disabled={true}
+          value={nintyDayERN ? dayjs(nintyDayERN.SendOn) : undefined}
+          label={'90-day Send Date'}
+          format={'LL'}
+        />
+      </Box>
+    </LocalizationProvider>
+  );
+};
+
+export default EnhancedReferralDates;
diff --git a/react-app/src/components/projects/ProjectDetail.tsx b/react-app/src/components/projects/ProjectDetail.tsx
@@ -50,6 +50,8 @@ import { LookupContext } from '@/contexts/lookupContext';
 import { Agency } from '@/hooks/api/useAgencyApi';
 import { getStatusString } from '@/constants/chesNotificationStatus';
 import { NoteTypes } from '@/constants/noteTypes';
+import EnhancedReferralDates from './EnhancedReferralDates';
+import { NotificationType } from '@/constants/notificationTypes';
 
 interface IProjectDetail {
   onClose: () => void;
@@ -96,6 +98,26 @@ const ProjectDetail = (props: IProjectDetail) => {
   const { submit: resendNotification } = useDataSubmitter(api.notifications.resendNotification);
   const { submit: cancelNotification } = useDataSubmitter(api.notifications.cancelNotification);
 
+  const hasERPNotifications = useMemo(() => {
+    // Check if notifications is an object and has an items array
+    if (!notifications || !Array.isArray(notifications.items)) {
+      return false;
+    }
+    const notificationItems = notifications.items;
+    if (notificationItems.length === 0) {
+      return false;
+    }
+
+    const types = [
+      NotificationType.THIRTY_DAY_ERP_NOTIFICATION_OWNING_AGENCY,
+      NotificationType.SIXTY_DAY_ERP_NOTIFICATION_OWNING_AGENCY,
+      NotificationType.NINTY_DAY_ERP_NOTIFICATION_OWNING_AGENCY,
+    ];
+
+    // Check if any of the notifications match the types
+    return notificationItems.some((n) => types.includes(n.TemplateId));
+  }, [notifications]);
+
   const { ungroupedAgencies, agencyOptions } = useGroupedAgenciesApi();
   interface IStatusHistoryStruct {
     Notes: Array<ProjectNote & { Name: string }>;
@@ -251,13 +273,18 @@ const ProjectDetail = (props: IProjectDetail) => {
   const agencyInterest = 'Agency Interest';
   const documentationHistory = 'Documentation History';
   const notificationsHeader = 'Notifications';
+  const enhancedReferralDates = 'Enhanced Referral Dates';
 
   const sideBarList = [
     { title: projectInformation },
     { title: disposalProperties },
     { title: financialInformation },
     { title: documentationHistory },
   ];
+  //
+  if (hasERPNotifications) {
+    sideBarList.splice(1, 0, { title: enhancedReferralDates });
+  }
   // only show Agency Interest and notifications for admins
   if (isAdmin) {
     sideBarList.splice(3, 0, { title: agencyInterest });
@@ -293,6 +320,18 @@ const ProjectDetail = (props: IProjectDetail) => {
           onEdit={() => setOpenProjectInfoDialog(true)}
           disableEdit={!isAdmin}
         />
+        {hasERPNotifications && (
+          <DataCard
+            values={undefined}
+            loading={isLoading}
+            title={enhancedReferralDates}
+            id={enhancedReferralDates}
+            onEdit={() => {}}
+            disableEdit={true}
+          >
+            <EnhancedReferralDates rows={notifications?.items} />
+          </DataCard>
+        )}
         <DataCard
           values={undefined}
           id={disposalProperties}

diff --git a/react-app/src/components/projects/ProjectNotificationsTable.tsx b/react-app/src/components/projects/ProjectNotificationsTable.tsx
@@ -1,13 +1,9 @@
 import { NotificationStatus } from '@/constants/chesNotificationStatus';
-import { NotificationType } from '@/constants/notificationTypes';
 import { NotificationQueue } from '@/hooks/api/useProjectNotificationApi';
 import { dateFormatter } from '@/utilities/formatters';
 import { Refresh, Delete } from '@mui/icons-material';
 import { Box, IconButton, Tooltip, Typography } from '@mui/material';
 import { DataGrid, GridColDef } from '@mui/x-data-grid';
-import { DateField, LocalizationProvider } from '@mui/x-date-pickers';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import dayjs from 'dayjs';
 import React, { useState } from 'react';
 
 interface ProjectNotificationsTableProps {
@@ -116,83 +112,12 @@ const ProjectNotificationsTable = (props: ProjectNotificationsTableProps) => {
 
   if (!props.rows) return <></>;
 
-  // Prepare values for Enhanced Referral Notification fields
-  const initalERN = props.rows.find(
-    (row) => row.TemplateId === NotificationType.NEW_PROPERTIES_ON_ERP,
-  );
-  const thirtyDayERN = props.rows.find(
-    (row) => row.TemplateId === NotificationType.THIRTY_DAY_ERP_NOTIFICATION_OWNING_AGENCY,
-  );
-  const sixtyDayERN = props.rows.find(
-    (row) => row.TemplateId === NotificationType.SIXTY_DAY_ERP_NOTIFICATION_OWNING_AGENCY,
-  );
-  const nintyDayERN = props.rows.find(
-    (row) => row.TemplateId === NotificationType.NINTY_DAY_ERP_NOTIFICATION_OWNING_AGENCY,
-  );
-
-  const allErnNotificatonsFound = [initalERN, thirtyDayERN, sixtyDayERN, nintyDayERN].every(
-    (notification) => notification != undefined,
-  );
-
   return !props.rows ? (
     <Box display={'flex'} justifyContent={'center'}>
       <Typography>No notifications were sent.</Typography>
     </Box>
   ) : (
     <>
-      {allErnNotificatonsFound ? (
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <Typography variant="h6">Enhanced Referral Notification Dates</Typography>
-          <Box
-            gap={1}
-            display={'inline-flex'}
-            mb={3}
-            mt={2}
-            sx={{
-              '& .MuiInputBase-root.Mui-disabled': {
-                '& > fieldset': {
-                  borderColor: 'rgba(0,0,0)',
-                },
-              },
-              '& .MuiFormLabel-root.MuiInputLabel-root': {
-                color: 'rgba(0, 0, 0)',
-              },
-              '& .MuiInputBase-input.MuiOutlinedInput-input.Mui-disabled': {
-                color: 'rgba(0,0,0)',
-                WebkitTextFillColor: 'rgba(0,0,0)',
-              },
-            }}
-          >
-            <DateField
-              disabled={true}
-              value={initalERN ? dayjs(initalERN.SendOn) : undefined}
-              label={'Initial Send Date'}
-              format={'LL'}
-            />
-            <DateField
-              disabled={true}
-              value={thirtyDayERN ? dayjs(thirtyDayERN.SendOn) : undefined}
-              label={'30-day Send Date'}
-              format={'LL'}
-            />
-            <DateField
-              disabled={true}
-              value={sixtyDayERN ? dayjs(sixtyDayERN.SendOn) : undefined}
-              label={'60-day Send Date'}
-              format={'LL'}
-            />
-            <DateField
-              disabled={true}
-              value={nintyDayERN ? dayjs(nintyDayERN.SendOn) : undefined}
-              label={'90-day Send Date'}
-              format={'LL'}
-            />
-          </Box>
-        </LocalizationProvider>
-      ) : (
-        <></>
-      )}
-
       <Typography variant="h6">Total Notifications: {props.rows.length}</Typography>
       <DataGrid
         sx={{