From 786b23a0dc2a4de2093edf039c71696681f8ca67 Mon Sep 17 00:00:00 2001
From: RuoxuanPengBC <144158684+RuoxuanPengBC@users.noreply.github.com>
Date: Fri, 24 Nov 2023 13:18:01 -0800
Subject: [PATCH] Home Ownership Component Update - from checkbox to radio
 group (#1622)

* fix minor bug of ticket 18249
* update land lease or own component, transfer part
* finished updating land lease or own component, tests to be updated
* update unit tests
* bug fixed - keyword NEW is always displayed in the label, MHR transfer detail
* update the test for border errors
* minor changes on layout of review page of MHR
---
 ppr-ui/package.json                           |   2 +-
 .../HomeLocation/HomeLandOwnership.vue        | 163 ++++++++++++++----
 .../ReviewConfirm/HomeLocationReview.vue      |  11 +-
 .../mhrTransfers/TransferDetails.vue          | 120 ++++++++++---
 .../mhrTransfers/TransferDetailsReview.vue    |   8 +-
 .../mhrInformation/useMhrInformation.ts       |   4 +-
 .../mhrRegistration/enums/MhrValidFlags.ts    |   1 +
 .../mhrRegistration/useNewMhrRegistration.ts  |   2 +-
 ppr-ui/src/composables/useRegistration.ts     |   4 +-
 .../mhr-validation-state-interface.ts         |   1 +
 ppr-ui/src/store/state/state-model.ts         |   7 +-
 .../views/newMhrRegistration/HomeLocation.vue |   8 +-
 ppr-ui/tests/unit/HomeLandOwnership.spec.ts   |  32 +++-
 ppr-ui/tests/unit/MhrInformation.spec.ts      |  10 +-
 14 files changed, 295 insertions(+), 78 deletions(-)

diff --git a/ppr-ui/package.json b/ppr-ui/package.json
index f0ddf17ec..7659de471 100644
--- a/ppr-ui/package.json
+++ b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "2.1.23",
+  "version": "2.1.24",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",
diff --git a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLandOwnership.vue b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLandOwnership.vue
index 401548281..d08cec65a 100644
--- a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLandOwnership.vue
+++ b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLandOwnership.vue
@@ -1,49 +1,133 @@
 <template>
-  <v-card flat rounded id="mhr-home-land-ownership" class="mhr-home-land-ownership pa-8">
-    <v-row no-gutters>
-      <v-col cols="12" sm="3">
-        <label class="generic-label" for="ownership">
-          Land Lease or Ownership
-        </label>
-      </v-col>
-      <v-col cols="12" sm="9">
-        <v-checkbox
-          id="ownership"
-          label="The manufactured home is located on land that the homeowners own,
-                 or on which they have a registered lease of 3 years or more."
-          v-model="isOwnLand"
-          class="my-0 py-0 px-0 ownership-checkbox"
-          data-test-id="ownership-checkbox"
-        />
-       </v-col>
-    </v-row>
+  <v-card flat rounded id="mhr-home-land-ownership"
+          class="mhr-home-land-ownership pa-8">
+    <v-form ref="leaseOrOwnForm">
+      <v-row no-gutters>
+        <v-col cols="12" sm="3">
+          <label class="generic-label" :class="{'error-text': validate}">
+            Land Lease or Ownership
+          </label>
+        </v-col>
+        <v-col cols="12" sm="9">
+          <p>
+            Is the manufactured home located on land that the homeowners own or on land that
+            they have a registered lease of 3 years or more?
+          </p>
+        </v-col>
+        <v-row class="mt-0 mb-n5">
+          <v-col cols="10" offset="3">
+            <v-radio-group
+              id="lease-own-option"
+              v-model="isOwnLand"
+              class="mt-2 ml-n2 mb-3"
+              row
+              data-test-id="ownership-radios"
+            >
+              <v-radio
+                id="yes-option"
+                class="yes-radio"
+                label="Yes"
+                active-class="active-radio"
+                :value="true"
+                data-test-id="yes-ownership-radiobtn"
+              />
+              <v-radio
+                id="no-option"
+                class="no-radio"
+                label="No"
+                active-class="active-radio"
+                :value="false"
+                data-test-id="no-ownership-radiobtn"
+              />
+            </v-radio-group>
+          </v-col>
+        </v-row>
+        <v-row v-if="isOwnLand">
+          <v-col cols="9" offset="3">
+            <v-divider class="mx-0 divider-mt" />
+            <p class="mb-n2 paragraph-mt" data-test-id="yes-paragraph">
+              <b>Note:</b> Land ownership or registered lease of the land for 3 years or more
+              must be verifiable through the BC Land Title and Survey Authority (LTSA)
+              or other authorized land authority.
+            </p>
+          </v-col>
+        </v-row>
+        <v-row v-if="!isOwnLand && isOwnLand!=null">
+          <v-col cols="9" offset="3">
+            <v-divider class="mx-0 divider-mt" />
+            <p class="mb-n2 paragraph-mt" data-test-id="no-paragraph">
+              <b>Note:</b> Written permission and tenancy agreements from the landowner
+              may be required for the home to remain on the land.
+              <br><br>
+              Relocation of the home onto land that the homeowner does not own or hold a
+              registered lease of 3 years or more may require additional permits from
+              authorities such as the applicable Municipality, Regional District, First
+              Nation, or Provincial Crown Land Office.
+            </p>
+          </v-col>
+        </v-row>
+      </v-row>
+    </v-form>
   </v-card>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, watch } from 'vue-demi'
+import { computed, defineComponent, reactive, ref, toRefs, watch } from 'vue-demi'
 import { useStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
+import { useMhrValidations } from '@/composables'
+import { FormIF } from '@/interfaces'
 
 export default defineComponent({
   name: 'HomeLandOwnership',
-  setup () {
+  props: {
+    validate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup (props) {
     const {
       setMhrRegistrationOwnLand
     } = useStore()
+    const { getMhrRegistrationValidationModel } = storeToRefs(useStore())
+    const {
+      MhrCompVal,
+      MhrSectVal,
+      setValidation
+    } = useMhrValidations(toRefs(getMhrRegistrationValidationModel.value))
     const {
       getMhrRegistrationOwnLand
     } = storeToRefs(useStore())
+    const leaseOrOwnForm = ref(null) as FormIF
 
     const localState = reactive({
-      isOwnLand: !!getMhrRegistrationOwnLand.value
+      isOwnLand: getMhrRegistrationOwnLand.value,
+      isValidHomeLandOwnership: computed((): boolean => {
+        return localState.isOwnLand !== null
+      })
     })
 
+    const validateForm = (): void => {
+      if (props.validate) {
+        leaseOrOwnForm.value?.validate()
+      }
+    }
+
     watch(() => localState.isOwnLand, (val: boolean) => {
       setMhrRegistrationOwnLand(val)
     })
 
+    watch(() => localState.isValidHomeLandOwnership, async (val: boolean) => {
+      setValidation(MhrSectVal.LOCATION_VALID, MhrCompVal.LAND_DETAILS_VALID, val)
+    })
+
+    watch(() => props.validate, () => {
+      validateForm()
+    })
+
     return {
+      leaseOrOwnForm,
       ...toRefs(localState)
     }
   }
@@ -52,15 +136,36 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
-.mhr-home-land-ownership::v-deep {
 
-  .ownership-checkbox {
-    label {
-      line-height: 24px;
-    }
-    .v-input__slot {
-      align-items: flex-start;
-    }
+.yes-radio {
+  width: 44%;
+  margin-right: 24px !important;
+  background-color: rgba(0, 0, 0, 0.06);
+  height: 60px;
+  padding-left: 20px;
+}
+
+.no-radio {
+  width: 44%;
+  background-color: rgba(0, 0, 0, 0.06);
+  height: 60px;
+  padding: 20px;
+  margin-right: 0px !important;
+}
+
+.active-radio {
+  border: 1px solid $app-blue;
+  background-color: white;
+  ::v-deep .theme--light.v-label:not(.v-label--is-disabled), .theme--light.v-messages {
+    color: $gray9 !important;
   }
 }
+
+.paragraph-mt{
+  margin-top: 39px;
+}
+
+.divider-mt{
+  margin-top: 14px;
+}
 </style>
diff --git a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue
index fa2c1b6f0..7abe27116 100644
--- a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue
+++ b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue
@@ -22,8 +22,10 @@
         </span>
       </section>
 
-      <section v-if="(!!getMhrRegistrationLocation.locationType || hasAddress)"
-        class="py-10" id="review-home-location-section"
+      <section v-if="(!!getMhrRegistrationLocation.locationType ||
+                      hasAddress ||
+                      getMhrRegistrationOwnLand !== null)"
+        class="py-10 mt-n5" id="review-home-location-section"
       >
         <v-row no-gutters class="px-8">
           <v-col cols="3" class="pt-1">
@@ -333,8 +335,10 @@ export default defineComponent({
           !!location.landDistrict || !!location.plan || !!location.exceptionPlan || !!location.reserveNumber
       }),
       landOwnershipLabel: computed(() => {
+        if (getMhrRegistrationOwnLand.value !== true &&
+            getMhrRegistrationOwnLand.value !== false) return '(Not Entered)'
         return `The manufactured home is <b>${getMhrRegistrationOwnLand.value ? '' : 'not'}</b> located on land that the
-            homeowners own, or on which they have a registered lease of 3 years or more.`
+            homeowners own or on land that they have a registered lease of 3 years or more.`
       }),
       showStepError: computed(() => {
         return !isMhrManufacturerRegistration.value && !getStepValidation(MhrSectVal.LOCATION_VALID)
@@ -347,6 +351,7 @@ export default defineComponent({
       MhrSectVal,
       getStepValidation,
       getMhrRegistrationLocation,
+      getMhrRegistrationOwnLand,
       getIsManualLocation,
       isMhrManufacturerRegistration,
       ...countryProvincesHelpers,
diff --git a/ppr-ui/src/components/mhrTransfers/TransferDetails.vue b/ppr-ui/src/components/mhrTransfers/TransferDetails.vue
index 696190291..aee8b8373 100644
--- a/ppr-ui/src/components/mhrTransfers/TransferDetails.vue
+++ b/ppr-ui/src/components/mhrTransfers/TransferDetails.vue
@@ -63,18 +63,70 @@
         </template>
         <v-row>
           <v-col cols="3">
-            <label class="generic-label" for="lease-own">
+            <label class="generic-label"
+                   for="lease-own-option"
+                   :class="{ 'error-text': showFormError }"
+                   >
               Land Lease or Ownership
             </label>
           </v-col>
-          <v-col cols="9" class="pl-1">
-            <v-checkbox
-              id="lease-own"
-              :label="landOrLeaseLabel"
+          <v-col cols="9" class="pl-3">
+            <p>Is the manufactured home located on land that the
+               {{isTransferDueToSaleOrGift ? 'new' : ''}} homeowners own or on land that
+               they have a registered lease of 3 years or more?</p>
+          </v-col>
+        </v-row>
+        <v-row class="mt-n1 mb-n5">
+          <v-col cols="9" offset="3">
+            <v-radio-group
+              id="lease-own-option"
               v-model="isOwnLand"
-              class="mt-0 pt-0 lease-own-checkbox"
-              data-test-id="lease-own-checkbox"
-            />
+              class="mt-0"
+              row
+              required
+              data-test-id="lease-own-radio"
+            >
+              <v-radio
+                id="yes-option"
+                class="yes-radio"
+                label="Yes"
+                active-class="active-radio"
+                :value="true"
+                data-test-id="yes-ownership-radiobtn"
+              />
+              <v-radio
+                id="no-option"
+                class="no-radio"
+                label="No"
+                active-class="active-radio"
+                :value="false"
+                data-test-id="no-ownership-radiobtn"
+              />
+            </v-radio-group>
+          </v-col>
+        </v-row>
+        <v-row v-if="isOwnLand">
+          <v-col cols="9" offset="3">
+            <v-divider class="mx-0 divider-mt" />
+            <p class="mb-1 paragraph-mt" data-test-id="yes-paragraph">
+              <b>Note:</b> Land ownership or registered lease of the land for 3 years or more
+              must be verifiable through the BC Land Title and Survey Authority (LTSA)
+              or other authorized land authority.
+            </p>
+          </v-col>
+        </v-row>
+        <v-row v-if="!isOwnLand && isOwnLand!==null">
+          <v-col cols="9" offset="3">
+            <v-divider class="mx-0 divider-mt" />
+            <p class="mb-1 paragraph-mt" data-test-id="no-paragraph">
+              <b>Note:</b> Written permission and tenancy agreements from the landowner
+              may be required for the home to remain on the land.
+              <br><br>
+              Relocation of the home onto land that the homeowner does not own or hold a
+              registered lease of 3 years or more may require additional permits from
+              authorities such as the applicable Municipality, Regional District, First
+              Nation, or Provincial Crown Land Office.
+            </p>
           </v-col>
         </v-row>
       </v-form>
@@ -122,7 +174,7 @@ export default defineComponent({
     } = storeToRefs(useStore())
     const {
       isTransferDueToDeath,
-      isTransferToExecutorProbateWill
+      isTransferDueToSaleOrGift
     } = useTransferOwners()
 
     const transferDetailsForm = ref(null) as FormIF
@@ -140,14 +192,10 @@ export default defineComponent({
       isValidForm: false, // TransferDetails form without Transfer Date Picker
       consideration: getMhrTransferConsideration.value,
       transferDate: getMhrTransferDate.value,
-      isOwnLand: getMhrTransferOwnLand.value || false,
+      isOwnLand: getMhrTransferOwnLand.value,
       enableWarningMsg: false,
-      landOrLeaseLabel: computed(() => {
-        return `The manufactured home is located on land that the ${!isTransferDueToDeath.value ||
-            isTransferToExecutorProbateWill.value ? 'new' : ''} homeowners
-         own, or on which they have a registered lease of 3 years or more.`
-      }),
-      isValidTransferDetails: computed(() => localState.isValidForm && !!localState.transferDate),
+      isValidTransferDetails: computed(() =>
+        localState.isValidForm && !!localState.transferDate && localState.isOwnLand !== null),
       showFormError: computed(() => props.validate && !localState.isValidTransferDetails),
       considerationRules: computed((): Array<Function> => {
         return customRules(required('Enter consideration'), maxLength(80))
@@ -162,7 +210,7 @@ export default defineComponent({
     const clearTransferDetailsData = () => {
       setMhrTransferConsideration('')
       setMhrTransferDate(null)
-      setMhrTransferOwnLand(false)
+      setMhrTransferOwnLand(null)
     }
 
     watch(() => props.validate, (val: boolean) => {
@@ -192,6 +240,7 @@ export default defineComponent({
       hasError,
       considerationRef,
       isTransferDueToDeath,
+      isTransferDueToSaleOrGift,
       transferDetailsForm,
       updateConsideration,
       clearTransferDetailsData,
@@ -214,13 +263,36 @@ export default defineComponent({
     border-top: 1px solid $gray3;
   }
 
-  .lease-own-checkbox {
-    label {
-      line-height: 24px;
-    }
-    .v-input__slot {
-      align-items: flex-start;
-    }
+.yes-radio {
+  width: 47%;
+  margin-right: 20px !important;
+  background-color: rgba(0, 0, 0, 0.06);
+  height: 60px;
+  padding: 20px;
+}
+
+.no-radio {
+  width: 50%;
+  background-color: rgba(0, 0, 0, 0.06);
+  height: 60px;
+  padding: 20px;
+  margin-right: 0px !important;
+}
+
+.active-radio {
+  border: 1px solid $app-blue;
+  background-color: white;
+  .theme--light.v-label:not(.v-label--is-disabled), .theme--light.v-messages {
+    color: $gray9 !important;
   }
 }
+
+.paragraph-mt{
+  margin-top: 39px;
+}
+
+.divider-mt{
+  margin-top: 13px;
+}
+}
 </style>
diff --git a/ppr-ui/src/components/mhrTransfers/TransferDetailsReview.vue b/ppr-ui/src/components/mhrTransfers/TransferDetailsReview.vue
index aa1223eb4..e49b48a4d 100644
--- a/ppr-ui/src/components/mhrTransfers/TransferDetailsReview.vue
+++ b/ppr-ui/src/components/mhrTransfers/TransferDetailsReview.vue
@@ -59,14 +59,14 @@ export default defineComponent({
 
     const {
       isTransferDueToDeath,
-      isTransferToExecutorProbateWill
+      isTransferDueToSaleOrGift
     } = useTransferOwners()
 
     const localState = reactive({
       landOrLeaseLabel: computed(() => {
-        return `The manufactured home is <b>${!getMhrTransferOwnLand.value ? 'not' : ''}</b> located on land that the
-            ${!isTransferDueToDeath.value || isTransferToExecutorProbateWill.value ? 'new' : ''} homeowners own, or
-            on which they have a registered lease of 3 years or more.`
+        return `The manufactured home is <b>${!getMhrTransferOwnLand.value ? 'not' : ''}</b>
+                located on land that the ${isTransferDueToSaleOrGift ? 'new' : ''} homeowners
+                own or on land that they have a registered lease of 3 years or more.`
       })
     })
 
diff --git a/ppr-ui/src/composables/mhrInformation/useMhrInformation.ts b/ppr-ui/src/composables/mhrInformation/useMhrInformation.ts
index 3a7d5a532..e5ef3fe48 100644
--- a/ppr-ui/src/composables/mhrInformation/useMhrInformation.ts
+++ b/ppr-ui/src/composables/mhrInformation/useMhrInformation.ts
@@ -109,7 +109,7 @@ export const useMhrInformation = () => {
       declaredValue: null,
       consideration: '',
       transferDate: '',
-      ownLand: false,
+      ownLand: null,
       attentionReference: '',
       isAffidavitTransferCompleted: false
     }
@@ -353,7 +353,7 @@ export const useMhrInformation = () => {
       declaredValue: getMhrTransferDeclaredValue.value,
       consideration: getMhrTransferConsideration.value,
       transferDate: getMhrTransferDate.value,
-      ownLand: getMhrTransferOwnLand.value || false,
+      ownLand: getMhrTransferOwnLand.value || null,
       ...(getMhrTransferDocumentId.value && {
         documentId: getMhrTransferDocumentId.value
       }),
diff --git a/ppr-ui/src/composables/mhrRegistration/enums/MhrValidFlags.ts b/ppr-ui/src/composables/mhrRegistration/enums/MhrValidFlags.ts
index 49ad15547..e44166e4f 100644
--- a/ppr-ui/src/composables/mhrRegistration/enums/MhrValidFlags.ts
+++ b/ppr-ui/src/composables/mhrRegistration/enums/MhrValidFlags.ts
@@ -27,6 +27,7 @@ export enum MhrCompVal {
   // Location Section
   LOCATION_TYPE_VALID = 'locationTypeValid',
   CIVIC_ADDRESS_VALID = 'civicAddressValid',
+  LAND_DETAILS_VALID = 'landDetailsValid',
 
   // Review Confirm Section
   ATTENTION_VALID = 'attentionValid', // Only used in Manufacturer registrations
diff --git a/ppr-ui/src/composables/mhrRegistration/useNewMhrRegistration.ts b/ppr-ui/src/composables/mhrRegistration/useNewMhrRegistration.ts
index 95e551f19..b9e38c427 100644
--- a/ppr-ui/src/composables/mhrRegistration/useNewMhrRegistration.ts
+++ b/ppr-ui/src/composables/mhrRegistration/useNewMhrRegistration.ts
@@ -86,7 +86,7 @@ export const useNewMhrRegistration = () => {
       ownerGroups: [],
       attentionReference: '',
       isManualLocationInfo: false,
-      ownLand: false,
+      ownLand: null,
       location: {
         parkName: '',
         pad: '',
diff --git a/ppr-ui/src/composables/useRegistration.ts b/ppr-ui/src/composables/useRegistration.ts
index fe7f7c5fd..90843c809 100644
--- a/ppr-ui/src/composables/useRegistration.ts
+++ b/ppr-ui/src/composables/useRegistration.ts
@@ -44,10 +44,10 @@ export const useRegistration = (setSort: RegistrationSortIF) => {
 
   const getStatusDescription = (status: APIStatusTypes | MhApiStatusTypes,
     isChild: boolean, isPpr: boolean, isDraft: boolean): string => {
-    if (!status) return UIStatusTypes.DRAFT
-    if (status === MhApiStatusTypes.FROZEN) return MhUIStatusTypes.ACTIVE
     if (isChild && isDraft) return UIStatusTypes.DRAFT
     if (isChild) return ''
+    if (!status) return UIStatusTypes.DRAFT
+    if (status === MhApiStatusTypes.FROZEN) return MhUIStatusTypes.ACTIVE
     if (!isChild && status === MhApiStatusTypes.EXEMPT) return MhUIStatusTypes.EXEMPT
     return isPpr ? PprAPIToUIStatusTypesMap[status] : MhrAPIToUIStatusTypesMap[status]
   }
diff --git a/ppr-ui/src/interfaces/store-interfaces/state-interfaces/mhr-validation-state-interface.ts b/ppr-ui/src/interfaces/store-interfaces/state-interfaces/mhr-validation-state-interface.ts
index 384e0651a..517ec9121 100644
--- a/ppr-ui/src/interfaces/store-interfaces/state-interfaces/mhr-validation-state-interface.ts
+++ b/ppr-ui/src/interfaces/store-interfaces/state-interfaces/mhr-validation-state-interface.ts
@@ -20,6 +20,7 @@ export interface MhrValidationStateIF {
   locationValid: {
     locationTypeValid: boolean
     civicAddressValid: boolean
+    landDetailsValid: boolean
   },
   reviewConfirmValid: {
     authorizationValid: boolean
diff --git a/ppr-ui/src/store/state/state-model.ts b/ppr-ui/src/store/state/state-model.ts
index 9f2b95424..4818d539f 100644
--- a/ppr-ui/src/store/state/state-model.ts
+++ b/ppr-ui/src/store/state/state-model.ts
@@ -189,7 +189,7 @@ export const stateModel: StateModelIF = {
     },
     ownerGroups: [],
     isManualLocationInfo: false,
-    ownLand: false,
+    ownLand: null,
     attentionReference: '',
     location: {
       parkName: '',
@@ -270,7 +270,8 @@ export const stateModel: StateModelIF = {
     },
     locationValid: {
       locationTypeValid: false,
-      civicAddressValid: false
+      civicAddressValid: false,
+      landDetailsValid: false
     },
     reviewConfirmValid: {
       authorizationValid: false,
@@ -309,7 +310,7 @@ export const stateModel: StateModelIF = {
     consideration: '',
     transferDate: '',
     attentionReference: '',
-    ownLand: false,
+    ownLand: null,
     isAffidavitTransferCompleted: false
   },
   mhrUnitNote: {
diff --git a/ppr-ui/src/views/newMhrRegistration/HomeLocation.vue b/ppr-ui/src/views/newMhrRegistration/HomeLocation.vue
index 407ebe34b..54c33f1aa 100644
--- a/ppr-ui/src/views/newMhrRegistration/HomeLocation.vue
+++ b/ppr-ui/src/views/newMhrRegistration/HomeLocation.vue
@@ -30,7 +30,10 @@
       <p class="mt-2">
         Confirm the land lease or ownership information for the home.
       </p>
-      <HomeLandOwnership />
+      <HomeLandOwnership
+        :validate="validateLandDetails"
+        :class="{ 'border-error-left': validateLandDetails }"
+      />
     </section>
   </div>
 </template>
@@ -69,6 +72,9 @@ export default defineComponent({
       }),
       validateCivicAddress: computed((): boolean => {
         return !!getSectionValidation(MhrSectVal.LOCATION_VALID, MhrCompVal.CIVIC_ADDRESS_VALID)
+      }),
+      validateLandDetails: computed((): boolean => {
+        return !!getSectionValidation(MhrSectVal.LOCATION_VALID, MhrCompVal.LAND_DETAILS_VALID)
       })
     })
 
diff --git a/ppr-ui/tests/unit/HomeLandOwnership.spec.ts b/ppr-ui/tests/unit/HomeLandOwnership.spec.ts
index 5f78437ea..533a47d8a 100644
--- a/ppr-ui/tests/unit/HomeLandOwnership.spec.ts
+++ b/ppr-ui/tests/unit/HomeLandOwnership.spec.ts
@@ -49,11 +49,35 @@ describe('Home Land Ownership', () => {
     expect(wrapper.findComponent(HomeLandOwnership).exists()).toBe(true)
   })
 
-  it('ownership checkbox performs as expected', async () => {
-    expect(store.getMhrRegistrationOwnLand).toBe(false)
-    expect(wrapper.find(getTestId('ownership-checkbox'))).toBeTruthy()
-    wrapper.find(getTestId('ownership-checkbox')).setChecked()
+  it('ownership radio group performs as expected', async () => {
+    expect(store.getMhrRegistrationOwnLand).toBe(null)
+    expect(wrapper.find(getTestId('ownership-radios'))).toBeTruthy()
+
+    //no instructional paragraph should be displayed initially
+    expect(wrapper.find(getTestId('yes-paragraph')).exists()).toBe(false)
+    expect(wrapper.find(getTestId('no-paragraph')).exists()).toBe(false)
+
+    const yesRadioBtn = <HTMLInputElement>(
+      wrapper.find(getTestId('yes-ownership-radiobtn'))).element
+    const noRadioBtn = <HTMLInputElement>(
+      wrapper.find(getTestId('no-ownership-radiobtn'))).element
+
+    //no button should be selected initially
+    expect(yesRadioBtn.checked).toBeFalsy()
+    expect(noRadioBtn.checked).toBeFalsy()
+
+    //click yes button
+    wrapper.find(getTestId('yes-ownership-radiobtn')).trigger('click')
     await nextTick()
     expect(store.getMhrRegistrationOwnLand).toBe(true)
+    expect(wrapper.find(getTestId('yes-paragraph')).exists()).toBe(true)
+    expect(wrapper.find(getTestId('no-paragraph')).exists()).toBe(false)
+
+    //click no button
+    wrapper.find(getTestId('no-ownership-radiobtn')).trigger('click')
+    await nextTick()
+    expect(store.getMhrRegistrationOwnLand).toBe(false)
+    expect(wrapper.find(getTestId('yes-paragraph')).exists()).toBe(false)
+    expect(wrapper.find(getTestId('no-paragraph')).exists()).toBe(true)
   })
 })
diff --git a/ppr-ui/tests/unit/MhrInformation.spec.ts b/ppr-ui/tests/unit/MhrInformation.spec.ts
index 696ab529f..9915c2ebe 100644
--- a/ppr-ui/tests/unit/MhrInformation.spec.ts
+++ b/ppr-ui/tests/unit/MhrInformation.spec.ts
@@ -409,7 +409,9 @@ describe('Mhr Information', () => {
     // expect(mhrTransferDetailsComponent.find(getTestId('declared-value')).exists()).toBeFalsy()
     expect(mhrTransferDetailsComponent.find(getTestId('consideration')).exists()).toBeTruthy()
     expect(mhrTransferDetailsComponent.find(getTestId('transfer-date')).exists()).toBeTruthy()
-    expect(mhrTransferDetailsComponent.find(getTestId('lease-own-checkbox')).exists()).toBeTruthy()
+    expect(store.getMhrRegistrationOwnLand).toBe(null)
+    expect(mhrTransferDetailsComponent.find(getTestId('lease-own-radio')).exists()).toBeTruthy()
+
     mhrTransferDetailsComponent.find(getTestId('consideration')).trigger('mousedown')
     await nextTick()
 
@@ -603,7 +605,7 @@ describe('Mhr Information', () => {
 
     // set some test values for transfer details fields
     const mhrTransferDetailsComponent = wrapper.findComponent(TransferDetails)
-    mhrTransferDetailsComponent.find(getTestId('lease-own-checkbox')).setChecked()
+    mhrTransferDetailsComponent.find(getTestId('yes-ownership-radiobtn')).trigger('click')
 
     await wrapper.find('#home-owners-change-btn').trigger('click')
     await nextTick()
@@ -806,8 +808,8 @@ describe('Mhr Information', () => {
     // make sure we are still on Mhr Information page due to the error in the table
     expect(wrapper.find('#mhr-information-header').text()).toContain('Manufactured Home Information')
     expect(wrapper.find(HomeOwners).props().isReadonlyTable).toBe(false)
-    // should be three border errors, for: error message itself, owner 1 and owner 2
-    expect(wrapper.findAll('.border-error-left').length).toBe(3)
+    // should be three border errors, for: error message itself, owner 1, owner 2, and Ownership
+    expect(wrapper.findAll('.border-error-left').length).toBe(4)
   })
 
   it('SURVIVING JOINT TENANT Flow: display correct Confirm Completion sections', async () => {