Merge pull request #1805 from bcgov/1773-fix-milestone-calculated-and…

…-adjusted-fields Fix: 1773 milestone calculated and adjusted fields
bcgov · Jul 24, 2023 · e82c41c · e82c41c
2 parents e410b49 + 728f1fc
commit e82c41c
Show file tree

Hide file tree

Showing 11 changed files with 182 additions and 3,197 deletions.
diff --git a/app/components/Form/ProjectEmissionIntensityReportFormSummary.tsx b/app/components/Form/ProjectEmissionIntensityReportFormSummary.tsx
@@ -259,6 +259,12 @@ const ProjectEmissionsIntensityReportFormSummary: React.FC<Props> = ({
             isOnAmendmentsAndOtherRevisionsPage,
         }}
       />
+      <style jsx>{`
+        :global(.adjustable-calculated-value-widget) {
+          display: flex;
+          flex-wrap: wrap;
+        }
+      `}</style>
     </>
   );
 };

diff --git a/app/components/Form/ProjectMilestoneReportFormSummary.tsx b/app/components/Form/ProjectMilestoneReportFormSummary.tsx
@@ -236,6 +236,12 @@ const ProjectMilestoneReportFormSummary: React.FC<Props> = ({
             uiSchema={updatedUiSchema}
             formData={milestoneFormDiffObject.formData}
             formContext={{
+              calculatedHoldbackAmount:
+                milestoneReport?.newFormData?.calculatedHoldbackAmount,
+              calculatedGrossAmount:
+                milestoneReport?.newFormData?.calculatedGrossAmount,
+              calculatedNetAmount:
+                milestoneReport?.newFormData?.calculatedNetAmount,
               operation: milestoneReport.operation,
               oldData:
                 milestoneReport.formChangeByPreviousFormChangeId?.newFormData,
@@ -244,11 +250,14 @@ const ProjectMilestoneReportFormSummary: React.FC<Props> = ({
                 isOnAmendmentsAndOtherRevisionsPage,
             }}
           />
-
           <style jsx>{`
             div.reportContainer {
               padding-top: 1em;
             }
+            :global(.adjustable-calculated-value-widget) {
+              display: flex;
+              flex-wrap: wrap;
+            }
           `}</style>
         </div>
       );

diff --git a/app/cypress/e2e/cif/project-revision/create-first-project-revision.cy.js b/app/cypress/e2e/cif/project-revision/create-first-project-revision.cy.js
@@ -266,10 +266,10 @@ describe("when creating a project, the project page", () => {
     // GHG performance uses the ReadOnlyAdjustableCalculatedValueWidget, which has a different HTML structure than the other fields
     cy.findByText("GHG Emission Intensity Performance")
       .next()
-      .should(
-        "have.text",
-        "200.00%GHG Emission Intensity Performance (Adjusted)100%"
-      );
+      .should("have.text", "200.00%");
+    cy.findByText("GHG Emission Intensity Performance (Adjusted)")
+      .next()
+      .should("have.text", "100%");
     cy.findByText("Payment Percentage of Performance Milestone Amount (%)")
       .next()
       .should("have.text", "100.00%");

diff --git a/app/lib/theme/ReadOnlyFieldTemplate.tsx b/app/lib/theme/ReadOnlyFieldTemplate.tsx
@@ -15,7 +15,13 @@ const FieldTemplate: React.FC<FieldTemplateProps> = ({
 }) => {
   return (
     <div>
-      <div className="definition-container">
+      <div
+        className={
+          uiSchema.calculatedValueFormContextProperty
+            ? "adjustable-calculated-value-widget"
+            : "definition-container"
+        }
+      >
         {displayLabel && (
           <FieldLabel
             label={label}

diff --git a/app/lib/theme/widgets/ReadOnlyAdjustableCalculatedValueWidget.tsx b/app/lib/theme/widgets/ReadOnlyAdjustableCalculatedValueWidget.tsx
@@ -1,5 +1,6 @@
 import { WidgetProps } from "@rjsf/core";
 import NumberFormat from "react-number-format";
+import CalculatedValueWidget from "./CalculatedValueWidget";
 
 const ReadOnlyAdjustableCalculatedValueWidget: React.FC<WidgetProps> = (
   props
@@ -10,34 +11,14 @@ const ReadOnlyAdjustableCalculatedValueWidget: React.FC<WidgetProps> = (
   const isMoney = uiSchema?.isMoney;
   const isPercentage = uiSchema?.isPercentage;
 
-  // If we need to set the amount of decimal places, we can set it in the uiSchema, otherwise there will be no decimal places.
-  const numberOfDecimalPlaces = isMoney
-    ? 2
-    : uiSchema?.numberOfDecimalPlaces ?? 0;
-
   const calculatedValue =
     formContext[uiSchema.calculatedValueFormContextProperty];
 
   const adjustedInputId = `${id}_adjusted`;
 
   return (
-    <div>
-      {calculatedValue && (
-        <>
-          {
-            <NumberFormat
-              thousandSeparator
-              fixedDecimalScale={numberOfDecimalPlaces}
-              decimalScale={numberOfDecimalPlaces}
-              id={id}
-              prefix={isMoney ? "$" : ""}
-              suffix={isPercentage ? "%" : ""}
-              value={calculatedValue}
-              displayType="text"
-            />
-          }
-        </>
-      )}
+    <>
+      <CalculatedValueWidget {...props} />
       {value !== calculatedValue && (
         <div className={"adjustedValue"}>
           <dt>{label} (Adjusted)</dt>
@@ -57,21 +38,22 @@ const ReadOnlyAdjustableCalculatedValueWidget: React.FC<WidgetProps> = (
           ) : (
             <em>Not added</em>
           )}
+          <style jsx>{`
+            .adjustedValue {
+              display: flex;
+              flex-basis: 100%;
+              padding-top: 0.5em;
+            }
+            dt {
+              margin: 0 1em 0 0;
+            }
+            dd {
+              margin-bottom: 0; // Override default margin-bottom for styling consistency
+            }
+          `}</style>
         </div>
       )}
-
-      <style jsx>{`
-        div.adjustedValue {
-          display: flex;
-        }
-        div.better {
-          display: flex;
-        }
-        dt {
-          margin: 0 1em 0 1em;
-        }
-      `}</style>
-    </div>
+    </>
   );
 };
 

diff --git a/app/tests/unit/components/Form/ProjectEmissionIntensityReportFormSummary.test.tsx b/app/tests/unit/components/Form/ProjectEmissionIntensityReportFormSummary.test.tsx
@@ -345,7 +345,7 @@ describe("the emission intensity report form component", () => {
       },
     };
     componentTestingHelper.loadQuery(customPayload);
-    const component = componentTestingHelper.renderComponent();
+    componentTestingHelper.renderComponent();
 
     // Note the exclusion of the GHG Emission Intensity Performance (Adjusted) field here
     // This is captured in AdjustableCalculatedValueWidget.test.tsx
@@ -370,8 +370,5 @@ describe("the emission intensity report form component", () => {
         name: "actual-performance-milestone-amount-tooltip",
       })
     ).toBeInTheDocument();
-
-    // check that tooltip text hasn't changed
-    expect(component.container).toMatchSnapshot();
   });
 });
diff --git a/app/tests/unit/components/Form/ProjectFundingAgreementFormSummary.test.tsx b/app/tests/unit/components/Form/ProjectFundingAgreementFormSummary.test.tsx
@@ -739,7 +739,7 @@ describe("The Project Funding Agreement Form Summary", () => {
         };
       },
     });
-    const component = componentTestingHelper.renderComponent();
+    componentTestingHelper.renderComponent();
     expect(
       screen.getAllByRole("tooltip", {
         name: "maximum-funding-amount-tooltip",
@@ -795,9 +795,6 @@ describe("The Project Funding Agreement Form Summary", () => {
         name: "total-eligible-expenses-to-date-tooltip",
       })
     ).toHaveLength(1);
-
-    // check that tooltip text hasn't changed
-    expect(component.container).toMatchSnapshot();
   });
 
   it("renders the tooltips for the IA form", () => {
@@ -880,7 +877,7 @@ describe("The Project Funding Agreement Form Summary", () => {
         };
       },
     });
-    const component = componentTestingHelper.renderComponent();
+    componentTestingHelper.renderComponent();
 
     expect(
       screen.getAllByRole("tooltip", {
@@ -913,7 +910,5 @@ describe("The Project Funding Agreement Form Summary", () => {
         name: "additional-funding-amount-tooltip",
       })
     ).toHaveLength(1);
-    // check that tooltip text hasn't changed
-    expect(component.container).toMatchSnapshot();
   });
 });