psp-7063 lease property corrections, ensure view screen displays area unit and…

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}
             />

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();
   });
 });

source/frontend/src/features/leases/detail/LeasePages/details/PropertyInformation.tsx

@@ -4,7 +4,7 @@
 
 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 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 @@
       </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">

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