From d28be7b906a89bffce821c7f3b11361cbb59db32 Mon Sep 17 00:00:00 2001
From: Alejandro Sanchez <emailforasr@gmail.com>
Date: Wed, 1 May 2024 15:25:19 -0700
Subject: [PATCH] PSP-8324 Update area convertor in Lease and License (#3981)

* Code cleanup

* Show common area component on lease view

* Update property-lease repository to return area unit type-code

* Use common area component to update lease property areas

* Test updates

* Increase spacing as per UI/UX review

* Update snapshots
---
 .../Repositories/PropertyLeaseRepository.cs   |   3 +-
 .../src/components/measurements/AreaView.tsx  |  56 ++-
 .../AddLeaseContainer.test.tsx.snap           |   5 -
 .../details/PropertyInformation.test.tsx      |  12 +-
 .../details/PropertyInformation.tsx           |  20 +-
 .../PropertiesInformation.test.tsx.snap       |  98 ++++-
 .../PropertyInformation.test.tsx.snap         | 352 ++++++++++++++++--
 source/frontend/src/features/leases/models.ts |  30 +-
 .../propertyPicker/LeasePropertySelector.tsx  |   2 +
 .../SelectedPropertyHeaderRow.tsx             |   1 -
 .../SelectedPropertyRow.test.tsx              |   3 +-
 .../SelectedPropertyRow.tsx                   |  92 +++--
 .../SelectedPropertyRow.test.tsx.snap         | 164 ++++++--
 13 files changed, 653 insertions(+), 185 deletions(-)

diff --git a/source/backend/dal/Repositories/PropertyLeaseRepository.cs b/source/backend/dal/Repositories/PropertyLeaseRepository.cs
index 76b17d9639..ca23a19c63 100644
--- a/source/backend/dal/Repositories/PropertyLeaseRepository.cs
+++ b/source/backend/dal/Repositories/PropertyLeaseRepository.cs
@@ -58,7 +58,8 @@ public IEnumerable<PimsPropertyLease> GetAllByPropertyId(long propertyId)
         /// <returns></returns>
         public IEnumerable<PimsPropertyLease> GetAllByLeaseId(long leaseId)
         {
-            return this.Context.PimsPropertyLeases.AsNoTracking()
+            return Context.PimsPropertyLeases.AsNoTracking()
+                .Include(pl => pl.AreaUnitTypeCodeNavigation)
                 .Include(pl => pl.Property)
                     .ThenInclude(p => p.Address)
                     .ThenInclude(p => p.Country)
diff --git a/source/frontend/src/components/measurements/AreaView.tsx b/source/frontend/src/components/measurements/AreaView.tsx
index 07c0d258c0..af23d57cb3 100644
--- a/source/frontend/src/components/measurements/AreaView.tsx
+++ b/source/frontend/src/components/measurements/AreaView.tsx
@@ -13,37 +13,35 @@ interface IAreaViewProps {
 const AreaView: React.FunctionComponent<IAreaViewProps> = props => {
   const meters = convertArea(props.landArea || 0, props.unitCode || '', AreaUnitTypes.SquareMeters);
   const feet = convertArea(props.landArea || 0, props.unitCode || '', AreaUnitTypes.SquareFeet);
-  const hectars = convertArea(props.landArea || 0, props.unitCode || '', AreaUnitTypes.Hectares);
+  const hectares = convertArea(props.landArea || 0, props.unitCode || '', AreaUnitTypes.Hectares);
   const acres = convertArea(props.landArea || 0, props.unitCode || '', AreaUnitTypes.Acres);
   return (
-    <>
-      <Row>
-        <Col>
-          <StyledGreenCol>
-            <Row>
-              <Col className="text-right">{formatNumber(meters, 0, 2)}</Col>
-              <Col>sq. metres</Col>
-            </Row>
-            <Row>
-              <Col className="text-right">{formatNumber(hectars, 0, 2)}</Col>
-              <Col>hectares</Col>
-            </Row>
-          </StyledGreenCol>
-        </Col>
-        <Col>
-          <StyledGreenGrey>
-            <Row>
-              <Col className="text-right">{formatNumber(feet, 0, 2)}</Col>
-              <Col>sq. feet</Col>
-            </Row>
-            <Row>
-              <Col className="text-right">{formatNumber(acres, 0, 2)}</Col>
-              <Col>acres</Col>
-            </Row>
-          </StyledGreenGrey>
-        </Col>
-      </Row>
-    </>
+    <Row>
+      <Col>
+        <StyledGreenCol>
+          <Row>
+            <Col className="text-right">{formatNumber(meters, 0, 2)}</Col>
+            <Col>sq. metres</Col>
+          </Row>
+          <Row>
+            <Col className="text-right">{formatNumber(hectares, 0, 2)}</Col>
+            <Col>hectares</Col>
+          </Row>
+        </StyledGreenCol>
+      </Col>
+      <Col>
+        <StyledGreenGrey>
+          <Row>
+            <Col className="text-right">{formatNumber(feet, 0, 2)}</Col>
+            <Col>sq. feet</Col>
+          </Row>
+          <Row>
+            <Col className="text-right">{formatNumber(acres, 0, 2)}</Col>
+            <Col>acres</Col>
+          </Row>
+        </StyledGreenGrey>
+      </Col>
+    </Row>
   );
 };
 
diff --git a/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap b/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
index b7268d9514..69aeed5a1b 100644
--- a/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
+++ b/source/frontend/src/features/leases/add/__snapshots__/AddLeaseContainer.test.tsx.snap
@@ -1343,11 +1343,6 @@ exports[`AddLeaseContainer component > renders as expected 1`] = `
                       </svg>
                     </span>
                   </div>
-                  <div
-                    class="col-3"
-                  >
-                    Area included
-                  </div>
                 </div>
                 <span>
                   No Properties selected
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 16c0a388e0..aff3c25455 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
@@ -3,10 +3,10 @@ import { createMemoryHistory } from 'history';
 import noop from 'lodash/noop';
 
 import { mockApiProperty } from '@/mocks/filterData.mock';
+import { getMockApiLease } from '@/mocks/lease.mock';
 import { getEmptyPropertyLease } from '@/mocks/properties.mock';
 import { ApiGen_Concepts_Lease } from '@/models/api/generated/ApiGen_Concepts_Lease';
 import { toTypeCodeNullable } from '@/utils/formUtils';
-import { getMockApiLease } from '@/mocks/lease.mock';
 import { render, RenderOptions } from '@/utils/test-utils';
 
 import PropertyInformation, { IPropertyInformationProps } from './PropertyInformation';
@@ -45,7 +45,7 @@ describe('PropertyInformation component', () => {
         fileProperties: [
           {
             ...getEmptyPropertyLease(),
-            ...mockApiProperty,
+            property: { ...mockApiProperty },
             areaUnitType: toTypeCodeNullable('test'),
             leaseArea: 123,
             fileId: 0,
@@ -65,7 +65,7 @@ describe('PropertyInformation component', () => {
         fileProperties: [
           {
             ...getEmptyPropertyLease(),
-            ...mockApiProperty,
+            property: { ...mockApiProperty },
             areaUnitType: toTypeCodeNullable('test'),
             leaseArea: 123,
             fileId: 0,
@@ -94,7 +94,7 @@ describe('PropertyInformation component', () => {
         fileProperties: [
           {
             ...getEmptyPropertyLease(),
-            ...mockApiProperty,
+            property: { ...mockApiProperty },
             leaseArea: 1,
             areaUnitType: toTypeCodeNullable('test'),
             fileId: 0,
@@ -123,7 +123,7 @@ describe('PropertyInformation component', () => {
         fileProperties: [
           {
             ...getEmptyPropertyLease(),
-            ...mockApiProperty,
+            property: { ...mockApiProperty },
             leaseArea: 123,
             areaUnitType: null,
             fileId: 0,
@@ -141,7 +141,7 @@ describe('PropertyInformation component', () => {
         startDate: '2020-01-01',
       },
     });
-    expect(component.getByText(/123.00/i)).toBeVisible();
+    expect(component.getByText(/123/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 3b792a5986..838a9d0976 100644
--- a/source/frontend/src/features/leases/detail/LeasePages/details/PropertyInformation.tsx
+++ b/source/frontend/src/features/leases/detail/LeasePages/details/PropertyInformation.tsx
@@ -3,9 +3,11 @@ import styled from 'styled-components';
 
 import { Input } from '@/components/common/form';
 import { SectionField } from '@/components/common/Section/SectionField';
+import AreaContainer from '@/components/measurements/AreaContainer';
+import { AreaUnitTypes } from '@/constants';
 import { ApiGen_Base_CodeType } from '@/models/api/generated/ApiGen_Base_CodeType';
 import { ApiGen_Concepts_Lease } from '@/models/api/generated/ApiGen_Concepts_Lease';
-import { formatNumber, isValidId, isValidString, pidFormatter } from '@/utils';
+import { isValidId, pidFormatter } from '@/utils';
 import { withNameSpace } from '@/utils/formUtils';
 
 import AddressSubForm from '../AddressSubForm';
@@ -47,18 +49,14 @@ export const PropertyInformation: React.FunctionComponent<
       <SectionField label="Descriptive name" labelWidth="3">
         <Input disabled={disabled} field={withNameSpace(nameSpace, 'propertyName')} />
       </SectionField>
-      <SectionField label="Area included" labelWidth="3">
-        {formatNumber(landArea || 0, 2, 2)}{' '}
-        {isValidString(areaUnitType?.description) ? (
-          `${areaUnitType?.description}.`
-        ) : (
-          <>
-            m<sup>2</sup>
-          </>
-        )}
+      <SectionField label="Area included" labelWidth="3" className="py-4">
+        <AreaContainer
+          landArea={landArea}
+          unitCode={areaUnitType?.id ?? AreaUnitTypes.SquareMeters}
+        />
       </SectionField>
       {!hideAddress ? (
-        <SectionField label="Address" labelWidth="3">
+        <SectionField label="Address" labelWidth="3" className="py-2">
           <AddressSubForm
             nameSpace={withNameSpace(nameSpace, 'property.address')}
             disabled={disabled}
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 bd28bcc437..c7764031fb 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
@@ -36,6 +36,20 @@ exports[`PropertiesInformation component > renders as expected 1`] = `
   font-weight: bold;
 }
 
+.c6 {
+  max-width: 25rem;
+  padding: 1rem;
+  border: 1px solid;
+  border-radius: 0.5rem;
+}
+
+.c7 {
+  max-width: 25rem;
+  padding: 1rem;
+  border: 1px solid;
+  border-radius: 0.5rem;
+}
+
 .c3 {
   margin-top: 4rem;
 }
@@ -131,7 +145,7 @@ exports[`PropertiesInformation component > renders as expected 1`] = `
           </div>
         </div>
         <div
-          class="pb-2 row"
+          class="py-4 row"
         >
           <div
             class="pr-0 text-left col-3"
@@ -145,14 +159,86 @@ exports[`PropertiesInformation component > renders as expected 1`] = `
           <div
             class="c5 text-left col"
           >
-            123.00 m
-            <sup>
-              2
-            </sup>
+            <div
+              class="row"
+            >
+              <div
+                class="col"
+              >
+                <div
+                  class="c6"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="text-right col"
+                    >
+                      123
+                    </div>
+                    <div
+                      class="col"
+                    >
+                      sq. metres
+                    </div>
+                  </div>
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="text-right col"
+                    >
+                      0.01
+                    </div>
+                    <div
+                      class="col"
+                    >
+                      hectares
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="col"
+              >
+                <div
+                  class="c7"
+                >
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="text-right col"
+                    >
+                      1,323.96
+                    </div>
+                    <div
+                      class="col"
+                    >
+                      sq. feet
+                    </div>
+                  </div>
+                  <div
+                    class="row"
+                  >
+                    <div
+                      class="text-right col"
+                    >
+                      0.03
+                    </div>
+                    <div
+                      class="col"
+                    >
+                      acres
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
         <div
-          class="pb-2 row"
+          class="py-2 row"
         >
           <div
             class="pr-0 text-left col-3"
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 89f2f40048..bb6610ce65 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
@@ -18,11 +18,17 @@ exports[`PropertyInformation component > renders a complete lease as expected 1`
 }
 
 .c3 {
-  grid-column: controls;
-  border-left: 1px solid black !important;
-  padding: 0.6rem 1.2rem;
-  color: #495057;
-  font-family: 'BCSans-Bold';
+  max-width: 25rem;
+  padding: 1rem;
+  border: 1px solid;
+  border-radius: 0.5rem;
+}
+
+.c4 {
+  max-width: 25rem;
+  padding: 1rem;
+  border: 1px solid;
+  border-radius: 0.5rem;
 }
 
 .c0 {
@@ -76,7 +82,7 @@ exports[`PropertyInformation component > renders a complete lease as expected 1`
       </div>
     </div>
     <div
-      class="pb-2 row"
+      class="py-4 row"
     >
       <div
         class="pr-0 text-left col-3"
@@ -90,14 +96,86 @@ exports[`PropertyInformation component > renders a complete lease as expected 1`
       <div
         class="c2 text-left col"
       >
-        123.00 m
-        <sup>
-          2
-        </sup>
+        <div
+          class="row"
+        >
+          <div
+            class="col"
+          >
+            <div
+              class="c3"
+            >
+              <div
+                class="row"
+              >
+                <div
+                  class="text-right col"
+                >
+                  123
+                </div>
+                <div
+                  class="col"
+                >
+                  sq. metres
+                </div>
+              </div>
+              <div
+                class="row"
+              >
+                <div
+                  class="text-right col"
+                >
+                  0.01
+                </div>
+                <div
+                  class="col"
+                >
+                  hectares
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="col"
+          >
+            <div
+              class="c4"
+            >
+              <div
+                class="row"
+              >
+                <div
+                  class="text-right col"
+                >
+                  1,323.96
+                </div>
+                <div
+                  class="col"
+                >
+                  sq. feet
+                </div>
+              </div>
+              <div
+                class="row"
+              >
+                <div
+                  class="text-right col"
+                >
+                  0.03
+                </div>
+                <div
+                  class="col"
+                >
+                  acres
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div
-      class="pb-2 row"
+      class="py-2 row"
     >
       <div
         class="pr-0 text-left col-3"
@@ -111,16 +189,72 @@ exports[`PropertyInformation component > renders a complete lease as expected 1`
       <div
         class="c2 text-left col"
       >
-        <label
-          class="form-label"
+        <div
+          class="input form-group"
         >
-          Address:
-        </label>
-        <p
-          class="c3"
+          <input
+            class="form-control"
+            id="input-fileProperties.0.property.address.streetAddress1"
+            name="fileProperties.0.property.address.streetAddress1"
+            title="1234 mock Street"
+            value="1234 mock Street"
+          />
+        </div>
+        <div
+          class="input form-group"
         >
-          Address not available in PIMS
-        </p>
+          <input
+            class="form-control"
+            id="input-fileProperties.0.property.address.streetAddress2"
+            name="fileProperties.0.property.address.streetAddress2"
+            title="N/A"
+            value="N/A"
+          />
+        </div>
+        <div
+          class="input form-group"
+        >
+          <input
+            class="form-control"
+            id="input-fileProperties.0.property.address.municipality"
+            name="fileProperties.0.property.address.municipality"
+            title="Victoria"
+            value="Victoria"
+          />
+        </div>
+        <div
+          class="input form-group"
+        >
+          <input
+            class="form-control"
+            id="input-fileProperties.0.property.address.postal"
+            name="fileProperties.0.property.address.postal"
+            title="V1V1V1"
+            value="V1V1V1"
+          />
+        </div>
+        <div
+          class="input form-group"
+        >
+          <input
+            class="form-control"
+            id="input-fileProperties.0.property.address.province.description"
+            name="fileProperties.0.property.address.province.description"
+            title="British Columbia"
+            value="British Columbia"
+          />
+        </div>
+        <div
+          class="input form-group"
+        >
+          <input
+            class="form-control"
+            id="input-fileProperties.0.property.address.country.description"
+            name="fileProperties.0.property.address.country.description"
+            title="Canada"
+            value="Canada"
+          />
+        </div>
       </div>
     </div>
     <div
@@ -137,7 +271,9 @@ exports[`PropertyInformation component > renders a complete lease as expected 1`
       </div>
       <div
         class="c2 text-left col"
-      />
+      >
+        test description
+      </div>
     </div>
     <hr />
   </div>
@@ -162,11 +298,17 @@ exports[`PropertyInformation component > renders minimally as expected 1`] = `
 }
 
 .c3 {
-  grid-column: controls;
-  border-left: 1px solid black !important;
-  padding: 0.6rem 1.2rem;
-  color: #495057;
-  font-family: 'BCSans-Bold';
+  max-width: 25rem;
+  padding: 1rem;
+  border: 1px solid;
+  border-radius: 0.5rem;
+}
+
+.c4 {
+  max-width: 25rem;
+  padding: 1rem;
+  border: 1px solid;
+  border-radius: 0.5rem;
 }
 
 .c0 {
@@ -220,7 +362,7 @@ exports[`PropertyInformation component > renders minimally as expected 1`] = `
       </div>
     </div>
     <div
-      class="pb-2 row"
+      class="py-4 row"
     >
       <div
         class="pr-0 text-left col-3"
@@ -234,14 +376,86 @@ exports[`PropertyInformation component > renders minimally as expected 1`] = `
       <div
         class="c2 text-left col"
       >
-        123.00 m
-        <sup>
-          2
-        </sup>
+        <div
+          class="row"
+        >
+          <div
+            class="col"
+          >
+            <div
+              class="c3"
+            >
+              <div
+                class="row"
+              >
+                <div
+                  class="text-right col"
+                >
+                  123
+                </div>
+                <div
+                  class="col"
+                >
+                  sq. metres
+                </div>
+              </div>
+              <div
+                class="row"
+              >
+                <div
+                  class="text-right col"
+                >
+                  0.01
+                </div>
+                <div
+                  class="col"
+                >
+                  hectares
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="col"
+          >
+            <div
+              class="c4"
+            >
+              <div
+                class="row"
+              >
+                <div
+                  class="text-right col"
+                >
+                  1,323.96
+                </div>
+                <div
+                  class="col"
+                >
+                  sq. feet
+                </div>
+              </div>
+              <div
+                class="row"
+              >
+                <div
+                  class="text-right col"
+                >
+                  0.03
+                </div>
+                <div
+                  class="col"
+                >
+                  acres
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
     <div
-      class="pb-2 row"
+      class="py-2 row"
     >
       <div
         class="pr-0 text-left col-3"
@@ -255,16 +469,72 @@ exports[`PropertyInformation component > renders minimally as expected 1`] = `
       <div
         class="c2 text-left col"
       >
-        <label
-          class="form-label"
+        <div
+          class="input form-group"
         >
-          Address:
-        </label>
-        <p
-          class="c3"
+          <input
+            class="form-control"
+            id="input-fileProperties.0.property.address.streetAddress1"
+            name="fileProperties.0.property.address.streetAddress1"
+            title="1234 mock Street"
+            value="1234 mock Street"
+          />
+        </div>
+        <div
+          class="input form-group"
         >
-          Address not available in PIMS
-        </p>
+          <input
+            class="form-control"
+            id="input-fileProperties.0.property.address.streetAddress2"
+            name="fileProperties.0.property.address.streetAddress2"
+            title="N/A"
+            value="N/A"
+          />
+        </div>
+        <div
+          class="input form-group"
+        >
+          <input
+            class="form-control"
+            id="input-fileProperties.0.property.address.municipality"
+            name="fileProperties.0.property.address.municipality"
+            title="Victoria"
+            value="Victoria"
+          />
+        </div>
+        <div
+          class="input form-group"
+        >
+          <input
+            class="form-control"
+            id="input-fileProperties.0.property.address.postal"
+            name="fileProperties.0.property.address.postal"
+            title="V1V1V1"
+            value="V1V1V1"
+          />
+        </div>
+        <div
+          class="input form-group"
+        >
+          <input
+            class="form-control"
+            id="input-fileProperties.0.property.address.province.description"
+            name="fileProperties.0.property.address.province.description"
+            title="British Columbia"
+            value="British Columbia"
+          />
+        </div>
+        <div
+          class="input form-group"
+        >
+          <input
+            class="form-control"
+            id="input-fileProperties.0.property.address.country.description"
+            name="fileProperties.0.property.address.country.description"
+            title="Canada"
+            value="Canada"
+          />
+        </div>
       </div>
     </div>
     <div
@@ -281,7 +551,9 @@ exports[`PropertyInformation component > renders minimally as expected 1`] = `
       </div>
       <div
         class="c2 text-left col"
-      />
+      >
+        test description
+      </div>
     </div>
     <hr />
   </div>
diff --git a/source/frontend/src/features/leases/models.ts b/source/frontend/src/features/leases/models.ts
index f7ff50b215..516f1287f6 100644
--- a/source/frontend/src/features/leases/models.ts
+++ b/source/frontend/src/features/leases/models.ts
@@ -1,5 +1,7 @@
+import isNumber from 'lodash/isNumber';
+
 import { IMapProperty } from '@/components/propertySelector/models';
-import { PropertyAreaUnitTypes } from '@/constants/index';
+import { AreaUnitTypes } from '@/constants/index';
 import { IAutocompletePrediction } from '@/interfaces';
 import { ApiGen_Concepts_ConsultationLease } from '@/models/api/generated/ApiGen_Concepts_ConsultationLease';
 import { ApiGen_Concepts_Lease } from '@/models/api/generated/ApiGen_Concepts_Lease';
@@ -8,12 +10,11 @@ import { EpochIsoDateTime } from '@/models/api/UtcIsoDateTime';
 import { getEmptyBaseAudit } from '@/models/defaultInitializers';
 import { ILookupCode } from '@/store/slices/lookupCodes/interfaces/ILookupCode';
 import { NumberFieldValue } from '@/typings/NumberFieldValue';
-import { exists, isValidId, isValidIsoDateTime, isValidString } from '@/utils';
+import { exists, isValidId, isValidIsoDateTime } from '@/utils';
 import {
   emptyStringtoNullable,
   fromTypeCode,
   stringToNull,
-  stringToUndefined,
   toTypeCodeNullable,
 } from '@/utils/formUtils';
 
@@ -187,13 +188,13 @@ export class FormLeaseProperty {
   leaseId: number | null;
   rowVersion?: number;
   name?: string;
-  landArea: string;
+  landArea: number;
   areaUnitTypeCode: string;
 
   private constructor(leaseId?: number | null) {
     this.leaseId = leaseId ?? null;
-    this.landArea = '0';
-    this.areaUnitTypeCode = PropertyAreaUnitTypes.Meter;
+    this.landArea = 0;
+    this.areaUnitTypeCode = AreaUnitTypes.SquareMeters;
   }
 
   public static fromApi(apiPropertyLease: ApiGen_Concepts_PropertyLease): FormLeaseProperty {
@@ -202,8 +203,8 @@ export class FormLeaseProperty {
     model.id = apiPropertyLease.id;
     model.rowVersion = apiPropertyLease.rowVersion ?? undefined;
     model.name = apiPropertyLease.propertyName ?? undefined;
-    model.landArea = apiPropertyLease.leaseArea?.toString() || '0';
-    model.areaUnitTypeCode = apiPropertyLease.areaUnitType?.id || PropertyAreaUnitTypes.Meter;
+    model.landArea = apiPropertyLease.leaseArea ?? 0;
+    model.areaUnitTypeCode = apiPropertyLease.areaUnitType?.id || AreaUnitTypes.SquareMeters;
     return model;
   }
 
@@ -214,10 +215,6 @@ export class FormLeaseProperty {
   }
 
   public static toApi(formLeaseProperty: FormLeaseProperty): ApiGen_Concepts_PropertyLease {
-    const landArea = stringToUndefined(formLeaseProperty.landArea);
-    const numberLeaseArea: number | undefined = isValidString(landArea)
-      ? Number(landArea)
-      : undefined;
     return {
       id: formLeaseProperty.id ?? 0,
       fileId: formLeaseProperty.leaseId ?? 0,
@@ -225,11 +222,10 @@ export class FormLeaseProperty {
       property: formLeaseProperty.property?.toApi() ?? null,
       propertyId: formLeaseProperty.property?.id ?? 0,
       propertyName: formLeaseProperty.name ?? null,
-      leaseArea: numberLeaseArea ?? null,
-      areaUnitType:
-        numberLeaseArea !== undefined
-          ? toTypeCodeNullable(formLeaseProperty.areaUnitTypeCode) ?? null
-          : null,
+      leaseArea: isNumber(formLeaseProperty.landArea) ? formLeaseProperty.landArea : 0,
+      areaUnitType: isNumber(formLeaseProperty.landArea)
+        ? toTypeCodeNullable(formLeaseProperty.areaUnitTypeCode) ?? null
+        : null,
       displayOrder: null,
       ...getEmptyBaseAudit(formLeaseProperty.rowVersion),
     };
diff --git a/source/frontend/src/features/leases/shared/propertyPicker/LeasePropertySelector.tsx b/source/frontend/src/features/leases/shared/propertyPicker/LeasePropertySelector.tsx
index cb84989dc9..9faefba6b9 100644
--- a/source/frontend/src/features/leases/shared/propertyPicker/LeasePropertySelector.tsx
+++ b/source/frontend/src/features/leases/shared/propertyPicker/LeasePropertySelector.tsx
@@ -214,11 +214,13 @@ export const LeasePropertySelector: React.FunctionComponent<LeasePropertySelecto
                     if (property !== undefined) {
                       return (
                         <SelectedPropertyRow
+                          formikProps={formikProps}
                           key={`property.${property.latitude}-${property.longitude}-${property.pid}-${property.apiId}`}
                           onRemove={() => onRemoveClick(index)}
                           nameSpace={`properties.${index}`}
                           index={index}
                           property={property}
+                          showSeparator={index < formikProps.values.properties.length - 1}
                         />
                       );
                     }
diff --git a/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyHeaderRow.tsx b/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyHeaderRow.tsx
index 8e5fd0b639..839e4c2614 100644
--- a/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyHeaderRow.tsx
+++ b/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyHeaderRow.tsx
@@ -16,7 +16,6 @@ export const SelectedPropertyHeaderRow: React.FunctionComponent<
           toolTip="Optionally - provide a user friendly description to identify the property, such as Highway 1"
         />
       </Col>
-      <Col xs={3}>Area included</Col>
     </HeaderRow>
   );
 };
diff --git a/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyRow.test.tsx b/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyRow.test.tsx
index 21122db275..10b658f8d6 100644
--- a/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyRow.test.tsx
+++ b/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyRow.test.tsx
@@ -25,8 +25,9 @@ describe('SelectedPropertyRow component', () => {
     // render component under test
     const component = await renderAsync(
       <Formik onSubmit={noop} initialValues={renderOptions.values ?? {}}>
-        {() => (
+        {formikProps => (
           <SelectedPropertyRow
+            formikProps={formikProps}
             property={
               renderOptions.values?.properties
                 ? PropertyForm.fromMapProperty(renderOptions.values?.properties[0])
diff --git a/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyRow.tsx b/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyRow.tsx
index 7d81813c94..cf106c3133 100644
--- a/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyRow.tsx
+++ b/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/SelectedPropertyRow.tsx
@@ -1,10 +1,12 @@
+import { FormikProps, getIn } from 'formik';
 import { Col, Row } from 'react-bootstrap';
 
 import { RemoveButton } from '@/components/common/buttons';
-import { Input } from '@/components/common/form';
 import { InlineInput } from '@/components/common/form/styles';
 import OverflowTip from '@/components/common/OverflowTip';
+import AreaContainer from '@/components/measurements/AreaContainer';
 import DraftCircleNumber from '@/components/propertySelector/selectedPropertyList/DraftCircleNumber';
+import { FormLeaseProperty, LeaseFormModel } from '@/features/leases/models';
 import { PropertyForm } from '@/features/mapSideBar/shared/models';
 import { withNameSpace } from '@/utils/formUtils';
 import { getPropertyName, NameSourceType } from '@/utils/mapPropertyUtils';
@@ -14,11 +16,18 @@ export interface ISelectedPropertyRowProps {
   nameSpace?: string;
   onRemove: () => void;
   property: PropertyForm;
+  formikProps: FormikProps<LeaseFormModel>;
+  showSeparator?: boolean;
 }
 
-export const SelectedPropertyRow: React.FunctionComponent<
-  React.PropsWithChildren<ISelectedPropertyRowProps>
-> = ({ nameSpace, onRemove, index, property }) => {
+export const SelectedPropertyRow: React.FunctionComponent<ISelectedPropertyRowProps> = ({
+  nameSpace,
+  onRemove,
+  index,
+  property,
+  formikProps,
+  showSeparator = false,
+}) => {
   const propertyName = getPropertyName(property.toMapProperty());
   let propertyIdentifier = '';
   switch (propertyName.label) {
@@ -35,39 +44,50 @@ export const SelectedPropertyRow: React.FunctionComponent<
       propertyIdentifier = '';
       break;
   }
+
+  const currentLeaseProperty: FormLeaseProperty = getIn(
+    formikProps.values,
+    withNameSpace(nameSpace),
+  );
+
   return (
-    <Row className="align-items-center mb-3 no-gutters">
-      <Col md={3} className="mb-0 d-flex align-items-center">
-        <DraftCircleNumber text={(index + 1).toString()} />
-        <OverflowTip fullText={propertyIdentifier} className="pl-3" />
-      </Col>
-      <Col md={6}>
-        <InlineInput
-          className="mb-0 w-100 pr-3"
-          label=""
-          field={withNameSpace(nameSpace, 'name')}
-          displayErrorTooltips={true}
-        />
-      </Col>
-      <Col md={2}>
-        <Row className="no-gutters align-items-center">
-          <Col>
-            <Input
-              className="mb-0 w-100"
-              label=""
-              field={withNameSpace(nameSpace, 'landArea')}
-              displayErrorTooltips={true}
-            />
-          </Col>
-          <Col xs="auto">
-            m<sup>2</sup>
-          </Col>
-        </Row>
-      </Col>
-      <Col md={1}>
-        <RemoveButton onRemove={onRemove} />
-      </Col>
-    </Row>
+    <>
+      <Row className="align-items-center my-3 no-gutters">
+        <Col md={3} className="mb-0 d-flex align-items-center">
+          <DraftCircleNumber text={(index + 1).toString()} />
+          <OverflowTip fullText={propertyIdentifier} className="pl-3" />
+        </Col>
+        <Col md={7}>
+          <InlineInput
+            className="mb-0 w-100 pr-3"
+            label=""
+            field={withNameSpace(nameSpace, 'name')}
+            displayErrorTooltips={true}
+          />
+        </Col>
+        <Col md={2}>
+          <RemoveButton onRemove={onRemove} />
+        </Col>
+      </Row>
+      <Row className="align-items-center mb-3 no-gutters">
+        <Col md={{ span: 9, offset: 3 }}>
+          <AreaContainer
+            isEditable
+            field={withNameSpace(nameSpace, 'landArea')}
+            landArea={currentLeaseProperty.landArea}
+            unitCode={currentLeaseProperty.areaUnitTypeCode}
+            onChange={(landArea, areaUnitTypeCode) => {
+              formikProps.setFieldValue(withNameSpace(nameSpace, 'landArea'), landArea);
+              formikProps.setFieldValue(
+                withNameSpace(nameSpace, 'areaUnitTypeCode'),
+                areaUnitTypeCode,
+              );
+            }}
+          />
+        </Col>
+      </Row>
+      {showSeparator && <hr className="my-3"></hr>}
+    </>
   );
 };
 
diff --git a/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/__snapshots__/SelectedPropertyRow.test.tsx.snap b/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/__snapshots__/SelectedPropertyRow.test.tsx.snap
index 48b8fd7be4..d879c8407c 100644
--- a/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/__snapshots__/SelectedPropertyRow.test.tsx.snap
+++ b/source/frontend/src/features/leases/shared/propertyPicker/selectedPropertyList/__snapshots__/SelectedPropertyRow.test.tsx.snap
@@ -209,7 +209,7 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
 }
 
 <div
-    class="align-items-center mb-3 no-gutters row"
+    class="align-items-center my-3 no-gutters row"
   >
     <div
       class="mb-0 d-flex align-items-center col-md-3"
@@ -289,7 +289,7 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
       />
     </div>
     <div
-      class="col-md-6"
+      class="col-md-7"
     >
       <div
         class="c3 mb-0 w-100 pr-3 input form-group"
@@ -304,36 +304,6 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
     </div>
     <div
       class="col-md-2"
-    >
-      <div
-        class="no-gutters align-items-center row"
-      >
-        <div
-          class="col"
-        >
-          <div
-            class="mb-0 w-100 input form-group"
-          >
-            <input
-              class="form-control"
-              id="input-landArea"
-              name="landArea"
-              value=""
-            />
-          </div>
-        </div>
-        <div
-          class="col-auto"
-        >
-          m
-          <sup>
-            2
-          </sup>
-        </div>
-      </div>
-    </div>
-    <div
-      class="col-md-1"
     >
       <button
         class="c4 Button c5 btn btn-link"
@@ -373,5 +343,135 @@ exports[`SelectedPropertyRow component > renders as expected 1`] = `
       </button>
     </div>
   </div>
+  .c0 {
+  max-width: 25rem;
+  padding: 1rem;
+  border: 1px solid;
+  border-radius: 0.5rem;
+}
+
+.c2 {
+  max-width: 25rem;
+  padding: 1rem;
+  border: 1px solid;
+  border-radius: 0.5rem;
+}
+
+.c1 {
+  max-width: 9rem;
+}
+
+<div
+    class="align-items-center mb-3 no-gutters row"
+  >
+    <div
+      class="col-md-9 offset-md-3"
+    >
+      <div
+        class="row"
+      >
+        <div
+          class="col"
+        >
+          <div
+            class="c0"
+          >
+            <div
+              class="pb-2 row"
+            >
+              <div
+                class="text-right col"
+              >
+                <input
+                  aria-label="square metres"
+                  class="c1"
+                  name="area-sq-meters"
+                  step=".01"
+                  type="number"
+                  value="0"
+                />
+              </div>
+              <div
+                class="col"
+              >
+                sq. metres
+              </div>
+            </div>
+            <div
+              class="row"
+            >
+              <div
+                class="text-right col"
+              >
+                <input
+                  aria-label="hectares"
+                  class="c1"
+                  name="area-hectares"
+                  step=".01"
+                  type="number"
+                  value="0"
+                />
+              </div>
+              <div
+                class="col"
+              >
+                hectares
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="col"
+        >
+          <div
+            class="c2"
+          >
+            <div
+              class="pb-2 row"
+            >
+              <div
+                class="text-right col"
+              >
+                <input
+                  aria-label="square feet"
+                  class="c1"
+                  name="area-sq-feet"
+                  step=".01"
+                  type="number"
+                  value="0"
+                />
+              </div>
+              <div
+                class="col"
+              >
+                sq. feet
+              </div>
+            </div>
+            <div
+              class="row"
+            >
+              <div
+                class="text-right col"
+              >
+                <input
+                  aria-label="acres"
+                  class="c1"
+                  name="area-acres"
+                  step=".01"
+                  type="number"
+                  value="0"
+                />
+              </div>
+              <div
+                class="col"
+              >
+                acres
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </DocumentFragment>
 `;