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
bcgov · Nov 24, 2023 · 786b23a · 786b23a
1 parent 31c77b2
commit 786b23a
Show file tree

Hide file tree

Showing 14 changed files with 295 additions and 78 deletions.
diff --git 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
@@ -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
@@ -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,