From 208eaf23b5d31a2b7c4fd39cc2a73c062665fba9 Mon Sep 17 00:00:00 2001
From: Smith <Devin.Smith@quartech.com>
Date: Fri, 20 Oct 2023 16:45:29 -0700
Subject: [PATCH] lease property corrections, ensure view screen displays area
 unit and type properly.

---
 .../details/PropertiesInformation.tsx         |   2 +-
 .../details/PropertyInformation.test.tsx      |  48 ++++--
 .../details/PropertyInformation.tsx           |  26 ++-
 .../PropertiesInformation.test.tsx.snap       |   9 +-
 .../PropertyInformation.test.tsx.snap         | 156 +++++-------------
 5 files changed, 101 insertions(+), 140 deletions(-)

diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/PropertiesInformation.tsx b/source/frontend/src/features/leases/detail/LeasePages/details/PropertiesInformation.tsx
index e0e4cd9b47..7de69d6a5d 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/PropertiesInformation.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/PropertiesInformation.tsx
@@ -55,7 +55,7 @@ export const PropertiesInformation: React.FunctionComponent<
           properties.map((property: FormLeaseProperty, index) => (
             <PropertyInformation
               {...renderProps}
-              nameSpace={withNameSpace(nameSpace, `properties.${index}.property`)}
+              nameSpace={withNameSpace(nameSpace, `properties.${index}`)}
               disabled={disabled}
               hideAddress={hideAddress}
             />
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/PropertyInformation.test.tsx b/source/frontend/src/features/leases/detail/LeasePages/details/PropertyInformation.test.tsx
index be9f30cd63..46d2eb98cc 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/PropertyInformation.test.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/PropertyInformation.test.tsx
@@ -2,8 +2,9 @@ import { Formik } from 'formik';
 import { createMemoryHistory } from 'history';
 import { noop } from 'lodash';
 
-import { LeaseFormModel } from '@/features/leases/models';
 import { mockParcel } from '@/mocks/filterData.mock';
+import { getMockApiLease } from '@/mocks/lease.mock';
+import { Api_Lease } from '@/models/api/Lease';
 import { render, RenderOptions } from '@/utils/test-utils';
 
 import PropertyInformation, { IPropertyInformationProps } from './PropertyInformation';
@@ -12,13 +13,13 @@ const history = createMemoryHistory();
 
 describe('PropertyInformation component', () => {
   const setup = (
-    renderOptions: RenderOptions & IPropertyInformationProps & { lease?: LeaseFormModel } = {
+    renderOptions: RenderOptions & IPropertyInformationProps & { lease?: Api_Lease } = {
       nameSpace: 'properties',
     },
   ) => {
     // render component under test
     const component = render(
-      <Formik onSubmit={noop} initialValues={renderOptions.lease ?? new LeaseFormModel()}>
+      <Formik onSubmit={noop} initialValues={renderOptions.lease ?? getMockApiLease()}>
         <PropertyInformation
           disabled={renderOptions.disabled}
           nameSpace={renderOptions.nameSpace}
@@ -38,8 +39,16 @@ describe('PropertyInformation component', () => {
     const { component } = setup({
       nameSpace: 'properties.0',
       lease: {
-        ...new LeaseFormModel(),
-        properties: [{ ...mockParcel, areaUnitTypeCode: 'test', landArea: '123', leaseId: null }],
+        ...getMockApiLease(),
+        properties: [
+          {
+            ...mockParcel,
+            areaUnitType: { id: 'test' },
+            leaseArea: 123,
+            leaseId: null,
+            lease: null,
+          },
+        ],
       },
     });
     expect(component.asFragment()).toMatchSnapshot();
@@ -49,11 +58,18 @@ describe('PropertyInformation component', () => {
     const { component } = setup({
       nameSpace: 'properties.0',
       lease: {
-        ...new LeaseFormModel(),
-        properties: [{ ...mockParcel, areaUnitTypeCode: 'test', landArea: '123', leaseId: null }],
+        ...getMockApiLease(),
+        properties: [
+          {
+            ...mockParcel,
+            areaUnitType: { id: 'test' },
+            leaseArea: 123,
+            leaseId: null,
+            lease: null,
+          },
+        ],
         amount: 1,
         description: 'a test description',
-        programName: 'A program',
         lFileNo: '222',
         tfaFileNumber: '333',
         psFileNo: '444',
@@ -70,11 +86,12 @@ describe('PropertyInformation component', () => {
     const { component } = setup({
       nameSpace: 'properties.0',
       lease: {
-        ...new LeaseFormModel(),
-        properties: [{ ...mockParcel, landArea: '1', areaUnitTypeCode: 'test', leaseId: null }],
+        ...getMockApiLease(),
+        properties: [
+          { ...mockParcel, leaseArea: 1, areaUnitType: { id: 'test' }, leaseId: null, lease: null },
+        ],
         amount: 1,
         description: 'a test description',
-        programName: 'A program',
         lFileNo: '222',
         tfaFileNumber: '333',
         psFileNo: '444',
@@ -91,11 +108,12 @@ describe('PropertyInformation component', () => {
     const { component } = setup({
       nameSpace: 'properties.0',
       lease: {
-        ...new LeaseFormModel(),
-        properties: [{ ...mockParcel, landArea: '123', areaUnitTypeCode: 'test', leaseId: null }],
+        ...getMockApiLease(),
+        properties: [
+          { ...mockParcel, leaseArea: 123, areaUnitType: null, leaseId: null, lease: null },
+        ],
         amount: 1,
         description: 'a test description',
-        programName: 'A program',
         lFileNo: '222',
         tfaFileNumber: '333',
         psFileNo: '444',
@@ -105,7 +123,7 @@ describe('PropertyInformation component', () => {
         startDate: '2020-01-01',
       },
     });
-    expect(component.getByText('123.00')).toBeVisible();
+    expect(component.getByText(/123.00/i)).toBeVisible();
     expect(component.queryByDisplayValue('undefined')).toBeNull();
   });
 });
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/PropertyInformation.tsx b/source/frontend/src/features/leases/detail/LeasePages/details/PropertyInformation.tsx
index 2c30267ba8..493d510926 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/PropertyInformation.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/PropertyInformation.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { Input } from '@/components/common/form';
 import { SectionField } from '@/components/common/Section/SectionField';
-import { LeaseFormModel } from '@/features/leases/models';
+import { Api_Lease } from '@/models/api/Lease';
 import { formatNumber, pidFormatter } from '@/utils';
 import { withNameSpace } from '@/utils/formUtils';
 
@@ -23,11 +23,14 @@ export interface IPropertyInformationProps {
 export const PropertyInformation: React.FunctionComponent<
   React.PropsWithChildren<IPropertyInformationProps & Partial<FieldArrayRenderProps>>
 > = ({ nameSpace, disabled, hideAddress }) => {
-  const formikProps = useFormikContext<LeaseFormModel>();
-  const landArea = getIn(formikProps.values, withNameSpace(nameSpace, 'landArea'));
+  const formikProps = useFormikContext<Api_Lease>();
+  const landArea = getIn(formikProps.values, withNameSpace(nameSpace, 'leaseArea'));
   const areaUnitType = getIn(formikProps.values, withNameSpace(nameSpace, 'areaUnitType'));
-  const legalDescription = getIn(formikProps.values, withNameSpace(nameSpace, 'legalDescription'));
-  const pid = getIn(formikProps.values, withNameSpace(nameSpace, 'pid'));
+  const legalDescription = getIn(
+    formikProps.values,
+    withNameSpace(nameSpace, 'property.legalDescription'),
+  );
+  const pid = getIn(formikProps.values, withNameSpace(nameSpace, 'property.pid'));
   const pidText = pid ? `PID: ${pidFormatter(pid)}` : '';
   const legalPidText = [legalDescription, pidText].filter(x => x).join(' ');
   return (
@@ -37,11 +40,20 @@ export const PropertyInformation: React.FunctionComponent<
       </SectionField>
       <SectionField label="Area included" labelWidth="3">
         {formatNumber(landArea, 2, 2)}{' '}
-        {areaUnitType?.description ? `${areaUnitType?.description}.` : ''}
+        {areaUnitType?.description ? (
+          `${areaUnitType?.description}.`
+        ) : (
+          <>
+            m<sup>2</sup>
+          </>
+        )}
       </SectionField>
       {!hideAddress ? (
         <SectionField label="Address" labelWidth="3">
-          <AddressSubForm nameSpace={withNameSpace(nameSpace, 'address')} disabled={disabled} />
+          <AddressSubForm
+            nameSpace={withNameSpace(nameSpace, 'property.address')}
+            disabled={disabled}
+          />
         </SectionField>
       ) : null}
       <SectionField label="Legal description" labelWidth="3">
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertiesInformation.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertiesInformation.test.tsx.snap
index 07913ba364..cf5f20c200 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertiesInformation.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertiesInformation.test.tsx.snap
@@ -115,8 +115,8 @@ exports[`PropertiesInformation component renders as expected 1`] = `
             >
               <input
                 class="form-control"
-                id="input-properties.0.property.propertyName"
-                name="properties.0.property.propertyName"
+                id="input-properties.0.propertyName"
+                name="properties.0.propertyName"
                 value=""
               />
             </div>
@@ -137,7 +137,10 @@ exports[`PropertiesInformation component renders as expected 1`] = `
           <div
             class="c5 text-left col"
           >
-            NaN 
+            NaN m
+            <sup>
+              2
+            </sup>
           </div>
         </div>
         <div
diff --git a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertyInformation.test.tsx.snap b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertyInformation.test.tsx.snap
index a95a80f3ae..28afc09736 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertyInformation.test.tsx.snap
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/__snapshots__/PropertyInformation.test.tsx.snap
@@ -17,6 +17,14 @@ exports[`PropertyInformation component renders a complete lease as expected 1`]
   font-weight: bold;
 }
 
+.c3 {
+  grid-column: controls;
+  border-left: 1px solid black !important;
+  padding: 0.6rem 1.2rem;
+  color: #495057;
+  font-family: 'BCSans-Bold';
+}
+
 .c0 {
   margin-top: 4rem;
 }
@@ -66,7 +74,10 @@ exports[`PropertyInformation component renders a complete lease as expected 1`]
       <div
         class="c2 text-left col"
       >
-        123.00 
+        123.00 m
+        <sup>
+          2
+        </sup>
       </div>
     </div>
     <div
@@ -84,61 +95,16 @@ exports[`PropertyInformation component renders a complete lease as expected 1`]
       <div
         class="c2 text-left col"
       >
-        <div
-          class="input form-group"
-        >
-          <input
-            class="form-control"
-            id="input-properties.0.address.streetAddress1"
-            name="properties.0.address.streetAddress1"
-            title="1234 mock Street"
-            value="1234 mock Street"
-          />
-        </div>
-        <div
-          class="input form-group"
-        >
-          <input
-            class="form-control"
-            id="input-properties.0.address.streetAddress2"
-            name="properties.0.address.streetAddress2"
-            title="N/A"
-            value="N/A"
-          />
-        </div>
-        <div
-          class="input form-group"
-        >
-          <input
-            class="form-control"
-            id="input-properties.0.address.municipality"
-            name="properties.0.address.municipality"
-            title="Victoria"
-            value="Victoria"
-          />
-        </div>
-        <div
-          class="input form-group"
+        <label
+          class="form-label"
         >
-          <input
-            class="form-control"
-            id="input-properties.0.address.postal"
-            name="properties.0.address.postal"
-            title="V1V1V1"
-            value="V1V1V1"
-          />
-        </div>
-        <div
-          class="input form-group"
+          Address:
+        </label>
+        <p
+          class="c3"
         >
-          <input
-            class="form-control"
-            id="input-properties.0.address.province"
-            name="properties.0.address.province"
-            title="BC"
-            value="BC"
-          />
-        </div>
+          Address not available in PIMS
+        </p>
       </div>
     </div>
     <div
@@ -155,9 +121,7 @@ exports[`PropertyInformation component renders a complete lease as expected 1`]
       </div>
       <div
         class="c2 text-left col"
-      >
-        PID: 000-000-000
-      </div>
+      />
     </div>
     <hr />
   </div>
@@ -181,6 +145,14 @@ exports[`PropertyInformation component renders minimally as expected 1`] = `
   font-weight: bold;
 }
 
+.c3 {
+  grid-column: controls;
+  border-left: 1px solid black !important;
+  padding: 0.6rem 1.2rem;
+  color: #495057;
+  font-family: 'BCSans-Bold';
+}
+
 .c0 {
   margin-top: 4rem;
 }
@@ -230,7 +202,10 @@ exports[`PropertyInformation component renders minimally as expected 1`] = `
       <div
         class="c2 text-left col"
       >
-        123.00 
+        123.00 m
+        <sup>
+          2
+        </sup>
       </div>
     </div>
     <div
@@ -248,61 +223,16 @@ exports[`PropertyInformation component renders minimally as expected 1`] = `
       <div
         class="c2 text-left col"
       >
-        <div
-          class="input form-group"
-        >
-          <input
-            class="form-control"
-            id="input-properties.0.address.streetAddress1"
-            name="properties.0.address.streetAddress1"
-            title="1234 mock Street"
-            value="1234 mock Street"
-          />
-        </div>
-        <div
-          class="input form-group"
-        >
-          <input
-            class="form-control"
-            id="input-properties.0.address.streetAddress2"
-            name="properties.0.address.streetAddress2"
-            title="N/A"
-            value="N/A"
-          />
-        </div>
-        <div
-          class="input form-group"
-        >
-          <input
-            class="form-control"
-            id="input-properties.0.address.municipality"
-            name="properties.0.address.municipality"
-            title="Victoria"
-            value="Victoria"
-          />
-        </div>
-        <div
-          class="input form-group"
+        <label
+          class="form-label"
         >
-          <input
-            class="form-control"
-            id="input-properties.0.address.postal"
-            name="properties.0.address.postal"
-            title="V1V1V1"
-            value="V1V1V1"
-          />
-        </div>
-        <div
-          class="input form-group"
+          Address:
+        </label>
+        <p
+          class="c3"
         >
-          <input
-            class="form-control"
-            id="input-properties.0.address.province"
-            name="properties.0.address.province"
-            title="BC"
-            value="BC"
-          />
-        </div>
+          Address not available in PIMS
+        </p>
       </div>
     </div>
     <div
@@ -319,9 +249,7 @@ exports[`PropertyInformation component renders minimally as expected 1`] = `
       </div>
       <div
         class="c2 text-left col"
-      >
-        PID: 000-000-000
-      </div>
+      />
     </div>
     <hr />
   </div>