Merge pull request #3497 from bcgov/NDT-304-Add-Indication-for-Auto-p…

…opulation-of-Benefits-and-Budget-Details-upon-RFI-Upload

feat: add indication to Template upload

CHANGELOG.md

@@ -1,3 +1,9 @@
+# [1.185.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.184.2...v1.185.0) (2024-08-26)
+
+### Features
+
+- add indication to Template upload ([d880cec](https://github.com/bcgov/CONN-CCBC-portal/commit/d880cecf266e7881f2c37de471a2afbd5816421b))
+
 ## [1.184.2](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.184.1...v1.184.2) (2024-08-26)
 
 ### Bug Fixes

app/components/Analyst/RFI/ListFilesWidget.tsx

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 import { useRouter } from 'next/router';
 import { useFeature } from '@growthbook/growthbook-react';
 import { AddButton } from '../Project';
+import TemplateDescription from './TemplateDescription';
 
 const StyledContainer = styled.div`
   margin-bottom: 24px;
@@ -40,10 +41,13 @@ const ListFilesWidget: React.FC<WidgetProps> = ({
   formContext,
   label,
   value,
+  uiSchema,
 }) => {
   const showRfiUpload = useFeature('show_analyst_rfi_upload').value;
   const router = useRouter();
   const isFiles = value?.length > 0;
+  const templateNumber =
+    (uiSchema['ui:options']?.templateNumber as number) ?? null;
 
   const handleDownload = async (uuid: string, fileName: string) => {
     const url = `/api/s3/download/${uuid}/${fileName}`;
@@ -86,6 +90,7 @@ const ListFilesWidget: React.FC<WidgetProps> = ({
           }}
         />
       )}
+      <TemplateDescription templateNumber={templateNumber} />
     </StyledContainer>
   );
 };

app/components/Analyst/RFI/TemplateDescription.tsx

@@ -0,0 +1,49 @@
+import { Link } from '@button-inc/bcgov-theme';
+import { useRouter } from 'next/router';
+import styled from 'styled-components';
+
+const HintText = styled.p`
+  color: ${(props) => props.theme.color.darkGrey};
+  font-style: italic;
+  font-size: 13px;
+  a {
+    color: ${(props) => props.theme.color.links};
+    font-size: 13px;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+`;
+
+interface Props {
+  templateNumber: number;
+}
+
+const TemplateDescription: React.FC<Props> = ({ templateNumber }) => {
+  const applicationId = useRouter().query.applicationId as string;
+  if (!templateNumber) return null;
+  const link = (
+    <Link
+      href={`/analyst/application/${applicationId}?section=${templateNumber === 1 ? 'benefits' : 'budgetDetails'}`}
+      passHref
+    >
+      {templateNumber === 1 ? 'Benefits' : 'Budget Details'}
+    </Link>
+  );
+
+  return (
+    (templateNumber === 1 || templateNumber === 2) && (
+      <HintText>
+        * RFI upload for Template {templateNumber} automatically updates the
+        data for{' '}
+        {templateNumber === 1
+          ? 'Final Eligible Households and Indigenous'
+          : 'Total Eligible Costs and Total Project Costs'}{' '}
+        in the {link} section. Please verify the changes on the application
+        page.*
+      </HintText>
+    )
+  );
+};
+
+export default TemplateDescription;

app/components/Review/Accordion.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import { useRouter } from 'next/router';
 import { BaseAccordion } from '@button-inc/bcgov-theme/Accordion';
 import styled from 'styled-components';
@@ -76,13 +76,16 @@ const Accordion = ({
   toggled,
   title,
   recordLocked,
+  focused,
   ...rest
 }: any) => {
   const [isToggled, setIsToggled] = useState(
     getToggledState(toggled, defaultToggled)
   );
   const router = useRouter();
   const applicationId = router.query.applicationId as string;
+  const accordionRef = useRef(null);
+
   const handleToggle = (event) => {
     setIsToggled((toggle) => !toggle);
     if (onToggle) onToggle(event);
@@ -96,9 +99,21 @@ const Accordion = ({
     setIsToggled(getToggledState(toggled, defaultToggled));
   }, [toggled, defaultToggled]);
 
+  useEffect(() => {
+    if (focused && accordionRef.current) {
+      window.scrollTo({
+        top:
+          accordionRef.current.getBoundingClientRect().top +
+          window.scrollY -
+          100, // Adjust offset to account for header
+        behavior: 'smooth',
+      });
+    }
+  }, [focused]);
+
   return (
     <StyledBaseAccordion {...rest} onToggle={handleToggle}>
-      <header>
+      <header ref={accordionRef}>
         <h2>{title}</h2>
         <StyledToggleRight>
           {allowAnalystEdit &&

app/components/Review/ReviewSectionField.tsx

@@ -20,13 +20,15 @@ const ReviewSectionField: React.FC<FieldProps> = (props) => {
     () => Object.keys(errorSchema || {}).length > 0 || !!hasFormContextError,
     [errorSchema, hasFormContextError]
   );
+  const toggledSection = formContext?.toggledSection === pageName;
   const allowAnalystEdit =
     uiOptions?.allowAnalystEdit && (formContext.isEditable ?? true);
   return (
     <Accordion
       id={idSchema.$id}
       name={name}
-      defaultToggled={uiOptions.defaultExpanded || hasErrors}
+      defaultToggled={uiOptions.defaultExpanded || hasErrors || toggledSection}
+      focused={toggledSection}
       toggled={formContext.toggleOverride}
       cbcId={formContext.cbcId}
       isCBC={formContext.isCBC}

app/formSchema/uiSchema/analyst/rfiUiSchema.ts

@@ -188,9 +188,15 @@ export const rfiViewUiSchema = {
     'ui:field': 'RequestedFilesField',
     eligibilityAndImpactsCalculator: {
       'ui:widget': 'ListFilesWidget',
+      'ui:options': {
+        templateNumber: 1,
+      },
     },
     detailedBudget: {
       'ui:widget': 'ListFilesWidget',
+      'ui:options': {
+        templateNumber: 2,
+      },
     },
     financialForecast: {
       'ui:widget': 'ListFilesWidget',
@@ -595,6 +601,7 @@ while (stack.length) {
         currentObj[key]['ui:options'].fileDateTitle = 'Date received';
         currentObj[key]['ui:options'].maxDate = new Date();
         currentObj[key]['ui:options'].showValidationMessage = true;
+        currentObj[key]['ui:options'].showTemplateUploadIndication = true;
       }
       stack.push(currentObj[key]);
     }