From 92b4c6be794f7cac75b79474037cadad9d582252 Mon Sep 17 00:00:00 2001
From: Max Makaluk <70341920+FussuChalice@users.noreply.github.com>
Date: Tue, 17 Dec 2024 14:15:13 +0200
Subject: [PATCH] fix(reports): add tooltip to the late reports

---
 .../report_details/late_report/index.tsx      | 51 +++++++++++++++----
 .../late_report/useLateReport.tsx             | 13 ++++-
 .../report_details/late_report/index.tsx      | 40 ++++++++++++---
 .../late_report/useLateReport.tsx             |  7 ++-
 src/locales/en/congregation.json              |  3 +-
 5 files changed, 95 insertions(+), 19 deletions(-)

diff --git a/src/features/reports/field_service/report_details/late_report/index.tsx b/src/features/reports/field_service/report_details/late_report/index.tsx
index 7c5a00e0f7..304db8b0a7 100644
--- a/src/features/reports/field_service/report_details/late_report/index.tsx
+++ b/src/features/reports/field_service/report_details/late_report/index.tsx
@@ -1,26 +1,59 @@
-import { Stack } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import { useAppTranslation } from '@hooks/index';
 import { LateReportProps } from './index.types';
 import useLateReport from './useLateReport';
 import Checkbox from '@components/checkbox';
 import Typography from '@components/typography';
+import Tooltip from '@components/tooltip';
+import { IconHelpFilled } from '@components/icons';
 
 const LateReport = ({ person }: LateReportProps) => {
   const { t } = useAppTranslation();
 
-  const { show_late, late_sent, checked, handleChecked, readOnly } =
-    useLateReport(person);
+  const {
+    show_late,
+    late_sent,
+    checked,
+    handleChecked,
+    readOnly,
+    setLateCheckboxHelpIsHovered,
+    lateCheckboxHelpIsHovered,
+  } = useLateReport(person);
 
   return (
     <>
       {show_late && (
         <Stack spacing="4px" alignItems="flex-end">
-          <Checkbox
-            readOnly={readOnly}
-            label={t('tr_lateReport')}
-            checked={checked}
-            onChange={(e) => handleChecked(e.target.checked)}
-          />
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <Checkbox
+              readOnly={readOnly}
+              label={t('tr_lateReport')}
+              checked={checked}
+              onChange={(e) => handleChecked(e.target.checked)}
+              sx={{ marginRight: '4px' }}
+            />
+            <Tooltip title={t('tr_lateReportTooltip')} placement="bottom-start">
+              <Box
+                onMouseEnter={() => setLateCheckboxHelpIsHovered(true)}
+                onMouseLeave={() => setLateCheckboxHelpIsHovered(false)}
+                sx={{
+                  display: 'flex',
+                  alignItems: 'center',
+                }}
+              >
+                <IconHelpFilled
+                  width={16}
+                  height={16}
+                  color={
+                    lateCheckboxHelpIsHovered
+                      ? 'var(--accent-main)'
+                      : 'var(--black)'
+                  }
+                />
+              </Box>
+            </Tooltip>
+          </Box>
+
           <Typography
             align="right"
             className="label-small-medium"
diff --git a/src/features/reports/field_service/report_details/late_report/useLateReport.tsx b/src/features/reports/field_service/report_details/late_report/useLateReport.tsx
index e007e95796..47341071ac 100644
--- a/src/features/reports/field_service/report_details/late_report/useLateReport.tsx
+++ b/src/features/reports/field_service/report_details/late_report/useLateReport.tsx
@@ -25,6 +25,9 @@ const useLateReport = (person: PersonType) => {
   const shortDateFormat = useRecoilValue(shortDateFormatState);
   const branchReports = useRecoilValue(branchFieldReportsState);
 
+  const [lateCheckboxHelpIsHovered, setLateCheckboxHelpIsHovered] =
+    useState(false);
+
   const branch_submitted = useMemo(() => {
     const report = branchReports.find(
       (record) => record.report_date === currentMonth
@@ -127,7 +130,15 @@ const useLateReport = (person: PersonType) => {
     }
   };
 
-  return { show_late, late_sent, checked, handleChecked, readOnly };
+  return {
+    show_late,
+    late_sent,
+    checked,
+    handleChecked,
+    readOnly,
+    setLateCheckboxHelpIsHovered,
+    lateCheckboxHelpIsHovered,
+  };
 };
 
 export default useLateReport;
diff --git a/src/features/reports/publisher_records_details/report_details/late_report/index.tsx b/src/features/reports/publisher_records_details/report_details/late_report/index.tsx
index 0812098810..464f8d6945 100644
--- a/src/features/reports/publisher_records_details/report_details/late_report/index.tsx
+++ b/src/features/reports/publisher_records_details/report_details/late_report/index.tsx
@@ -3,7 +3,8 @@ import { useAppTranslation } from '@hooks/index';
 import useLateReport from './useLateReport';
 import Checkbox from '@components/checkbox';
 import Typography from '@components/typography';
-import { IconInfo } from '@components/icons';
+import { IconHelpFilled, IconInfo } from '@components/icons';
+import Tooltip from '@components/tooltip';
 
 const LateReport = () => {
   const { t } = useAppTranslation();
@@ -15,6 +16,8 @@ const LateReport = () => {
     handleChecked,
     readOnly,
     branch_submitted,
+    lateCheckboxHelpIsHovered,
+    setLateCheckboxHelpIsHovered,
   } = useLateReport();
 
   if (!show_late) return <></>;
@@ -40,12 +43,35 @@ const LateReport = () => {
       )}
 
       <Stack spacing="4px">
-        <Checkbox
-          readOnly={readOnly}
-          label={t('tr_lateReport')}
-          checked={checked}
-          onChange={(e) => handleChecked(e.target.checked)}
-        />
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Checkbox
+            readOnly={readOnly}
+            label={t('tr_lateReport')}
+            checked={checked}
+            onChange={(e) => handleChecked(e.target.checked)}
+            sx={{ marginRight: '4px' }}
+          />
+          <Tooltip title={t('tr_lateReportTooltip')} placement="bottom-start">
+            <Box
+              onMouseEnter={() => setLateCheckboxHelpIsHovered(true)}
+              onMouseLeave={() => setLateCheckboxHelpIsHovered(false)}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+              }}
+            >
+              <IconHelpFilled
+                width={16}
+                height={16}
+                color={
+                  lateCheckboxHelpIsHovered
+                    ? 'var(--accent-main)'
+                    : 'var(--black)'
+                }
+              />
+            </Box>
+          </Tooltip>
+        </Box>
         <Typography
           align="right"
           className="label-small-medium"
diff --git a/src/features/reports/publisher_records_details/report_details/late_report/useLateReport.tsx b/src/features/reports/publisher_records_details/report_details/late_report/useLateReport.tsx
index f069faf4d8..d206ad87ea 100644
--- a/src/features/reports/publisher_records_details/report_details/late_report/useLateReport.tsx
+++ b/src/features/reports/publisher_records_details/report_details/late_report/useLateReport.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useAppTranslation } from '@hooks/index';
 import { publisherCurrentReportState } from '@states/field_service_reports';
@@ -13,6 +13,9 @@ const useLateReport = () => {
     publisherCurrentReportState
   );
 
+  const [lateCheckboxHelpIsHovered, setLateCheckboxHelpIsHovered] =
+    useState(false);
+
   const shortDateFormat = useRecoilValue(shortDateFormatState);
   const branchReports = useRecoilValue(branchFieldReportsState);
 
@@ -68,6 +71,8 @@ const useLateReport = () => {
     handleChecked,
     readOnly,
     branch_submitted,
+    lateCheckboxHelpIsHovered,
+    setLateCheckboxHelpIsHovered,
   };
 };
 
diff --git a/src/locales/en/congregation.json b/src/locales/en/congregation.json
index 62abea7933..ed038d9f71 100644
--- a/src/locales/en/congregation.json
+++ b/src/locales/en/congregation.json
@@ -454,5 +454,6 @@
   "tr_importDataConfirmDesc": "Select the data you want to import to replace your records in Organized",
   "tr_importDataCompleted": "Import completed",
   "tr_importDataCompletedDesc": "Your data has been imported successfully. Organized app will now reload.",
-  "tr_markDisqualifiedTitle": "Mark as disqualified"
+  "tr_markDisqualifiedTitle": "Mark as disqualified",
+  "tr_lateReportTooltip": "Mark a report as 'Late' if the monthly branch office report has already been submitted. Late report will automatically be included in next month's submission."
 }