Transport Permit form

ppr-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "3.0.27",
+  "version": "3.0.28",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",

ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLandOwnership.vue

@@ -3,7 +3,7 @@
     id="mhr-home-land-ownership"
     flat
     rounded
-    class="mhr-home-land-ownership pa-8"
+    class="mhr-home-land-ownership pa-8 pb-0 mt-8"
   >
     <v-form ref="leaseOrOwnForm">
       <v-row no-gutters>
@@ -23,68 +23,50 @@
           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?
+            {{ content.description }}
           </p>
-        </v-col>
-        <v-row
-          noGutters
-          class="mt-0 mb-n5"
-        >
-          <v-col
-            cols="9"
-            offset="3"
-          >
-            <v-radio-group
-              id="lease-own-option"
-              v-model="isOwnLand"
-              class="mt-2 mb-3"
-              inline
-              data-test-id="ownership-radios"
-            >
-              <v-radio
-                id="yes-option"
-                class="radio-one"
-                label="Yes"
-                :class="{'selected-radio': isOwnLand === true}"
-                :value="true"
-                data-test-id="yes-ownership-radio-btn"
-              />
-              <v-radio
-                id="no-option"
-                class="radio-two"
-                label="No"
-                :class="{'selected-radio': isOwnLand === false}"
-                :value="false"
-                data-test-id="no-ownership-radio-btn"
-              />
-            </v-radio-group>
-          </v-col>
-        </v-row>
-        <v-row v-if="isOwnLand">
-          <v-col
-            cols="9"
-            offset="3"
+
+          <v-radio-group
+            id="lease-own-option"
+            v-model="isOwnLand"
+            class="mt-10 mb-5"
+            inline
+            data-test-id="ownership-radios"
           >
+            <v-radio
+              id="yes-option"
+              class="radio-one"
+              label="Yes"
+              :class="{'selected-radio': isOwnLand === true}"
+              :value="true"
+              data-test-id="yes-ownership-radio-btn"
+            />
+            <v-radio
+              id="no-option"
+              class="radio-two"
+              label="No"
+              :class="{'selected-radio': isOwnLand === false}"
+              :value="false"
+              data-test-id="no-ownership-radio-btn"
+            />
+          </v-radio-group>
+
+          <div v-if="isOwnLand">
             <v-divider class="mx-0 divider-mt" />
             <p
-              class="mb-n2 paragraph-mt"
+              class="py-10"
               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"
-          >
+          </div>
+
+          <div v-if="!isOwnLand && isOwnLand!=null">
             <v-divider class="mx-0 divider-mt" />
             <p
-              class="mb-n2 paragraph-mt"
+              class="py-10"
               data-test-id="no-paragraph"
             >
               <b>Note:</b> Written permission and tenancy agreements from the landowner
@@ -95,8 +77,8 @@
               authorities such as the applicable Municipality, Regional District, First
               Nation, or Provincial Crown Land Office.
             </p>
-          </v-col>
-        </v-row>
+          </div>
+        </v-col>
       </v-row>
     </v-form>
   </v-card>
@@ -107,15 +89,23 @@ import { computed, defineComponent, reactive, ref, toRefs, watch } from 'vue-dem
 import { useStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
 import { useMhrValidations } from '@/composables'
-import { FormIF } from '@/interfaces'
+import { ContentIF, FormIF } from '@/interfaces'
 
 export default defineComponent({
   name: 'HomeLandOwnership',
   props: {
+    ownLand: {
+      type: Boolean,
+      default: undefined
+    },
     validate: {
       type: Boolean,
       default: false
-    }
+    },
+    content: {
+      type: Object as () => ContentIF,
+      default: () => {}
+    },
   },
   setup (props) {
     const {
@@ -127,13 +117,11 @@ export default defineComponent({
       MhrSectVal,
       setValidation
     } = useMhrValidations(toRefs(getMhrRegistrationValidationModel.value))
-    const {
-      getMhrRegistrationOwnLand
-    } = storeToRefs(useStore())
+
     const leaseOrOwnForm = ref(null) as FormIF
 
     const localState = reactive({
-      isOwnLand: getMhrRegistrationOwnLand.value,
+      isOwnLand: props.ownLand,
       isValidHomeLandOwnership: computed((): boolean => {
         return localState.isOwnLand !== null
       })
@@ -167,11 +155,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
-.paragraph-mt{
-  margin-top: 39px;
-}
-
-.divider-mt{
+.divider-mt {
   margin-top: 14px;
 }
 </style>

ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLocationType.vue

@@ -27,7 +27,7 @@
           id="location-type--radio-options"
           v-model="locationTypeOption"
           class="mt-0 pr-1"
-          hideDetails="true"
+          :hideDetails="true"
           :disabled="isVerifyingPid"
         >
           <!-- Dealers / Manufacturers Lot -->
@@ -218,32 +218,68 @@ import { HomeLocationTypes } from '@/enums'
 import { PidNumber } from '@/components/common'
 import HomeLocationDescription from './HomeLocationDescription.vue'
 import { useInputRules, useMhrValidations, useNewMhrRegistration } from '@/composables'
-import { FormIF, MhrLocationInfoIF } from '@/interfaces'
+import { FormIF, MhrLocationInfoIF, MhrRegistrationHomeLocationIF } from '@/interfaces'
 import { PidInfoIF } from '@/interfaces/ltsa-api-interfaces'
 import { storeToRefs } from 'pinia'
 
-
 export default defineComponent({
   name: 'HomeLocationType',
   components: {
     HomeLocationDescription,
     PidNumber
   },
   props: {
+    locationTypeInfo: {
+      type: Object as () => MhrRegistrationHomeLocationIF,
+      default: {
+        parkName: '',
+        pad: '',
+        address: {
+          street: '',
+          streetAdditional: '',
+          city: '',
+          region: null,
+          country: null,
+          postalCode: ''
+        },
+        leaveProvince: false,
+        pidNumber: '',
+        taxCertificate: false,
+        taxExpiryDate: '',
+        dealerName: '',
+        additionalDescription: '',
+        locationType: null,
+        otherType: null,
+        legalDescription: '',
+        lot: '',
+        parcel: '',
+        block: '',
+        districtLot: '',
+        partOf: '',
+        section: '',
+        township: '',
+        range: '',
+        meridian: '',
+        landDistrict: '',
+        plan: '',
+        bandName: '',
+        reserveNumber: '',
+        exceptionPlan: ''
+      } as MhrRegistrationHomeLocationIF
+    },
     validate: {
       type: Boolean,
       default: false
     }
   },
-  setup (props) {
+  emits: ['setStoreProperty'],
+  setup (props, { emit }) {
     const {
       // Actions
-      setMhrLocation,
       setIsManualLocation
     } = useStore()
     const {
       // Getters
-      getMhrRegistrationLocation,
       getMhrRegistrationValidationModel
     } = storeToRefs(useStore())
     const { resetLocationInfoFields } = useNewMhrRegistration()
@@ -259,7 +295,7 @@ export default defineComponent({
     // Home location store properties
     // Developer note: de-construction of store computed properties in this manner will result in the loss of reactivity
     const { additionalDescription, dealerName, legalDescription, locationType, pad, pidNumber, parkName, otherType } =
-      getMhrRegistrationLocation.value
+      props.locationTypeInfo
 
     const localState = reactive({
       isValidLot: false,
@@ -331,31 +367,31 @@ export default defineComponent({
 
     /** Apply local models to store when they change. **/
     watch(() => localState.dealerManufacturerLot, () => {
-      setMhrLocation({ key: 'dealerName', value: localState.dealerManufacturerLot })
+      emit('setStoreProperty', { key: 'dealerName', value: localState.dealerManufacturerLot })
     })
     watch(() => localState.homeParkName, () => {
-      setMhrLocation({ key: 'parkName', value: localState.homeParkName })
+      emit('setStoreProperty', { key: 'parkName', value: localState.homeParkName })
     })
     watch(() => localState.homeParkPad, () => {
-      setMhrLocation({ key: 'pad', value: localState.homeParkPad })
+      emit('setStoreProperty', { key: 'pad', value: localState.homeParkPad })
     })
     watch(() => localState.pidNumber, () => {
-      setMhrLocation({ key: 'pidNumber', value: localState.pidNumber })
-      setMhrLocation({ key: 'legalDescription', value: localState.legalDescription })
+      emit('setStoreProperty', { key: 'pidNumber', value: localState.pidNumber })
+      emit('setStoreProperty', { key: 'legalDescription', value: localState.legalDescription })
     })
     watch(() => localState.locationInfo, (val: MhrLocationInfoIF) => {
       for (const [key, value] of Object.entries(val)) {
-        setMhrLocation({ key, value })
+        emit('setStoreProperty', { key, value })
       }
     }, { deep: true })
     watch(() => localState.additionalDescription, () => {
-      setMhrLocation({ key: 'additionalDescription', value: localState.additionalDescription })
+      emit('setStoreProperty', { key: 'additionalDescription', value: localState.additionalDescription })
     })
     watch(() => localState.locationTypeOption, () => {
-      setMhrLocation({ key: 'locationType', value: localState.locationTypeOption })
+      emit('setStoreProperty', { key: 'locationType', value: localState.locationTypeOption })
     })
     watch(() => localState.otherTypeOption, () => {
-      setMhrLocation({ key: 'otherType', value: localState.otherTypeOption })
+      emit('setStoreProperty', { key: 'otherType', value: localState.otherTypeOption })
     })
     watch(() => localState.isLocationTypeValid, (val: boolean) => {
       setValidation(MhrSectVal.LOCATION_VALID, MhrCompVal.LOCATION_TYPE_VALID, val)