UXA feedback and fixes

ppr-ui/src/components/dialogs/BaseDialog.vue

@@ -27,9 +27,10 @@
         </v-col>
         <v-col cols="1">
           <v-btn
-            class="close-btn float-right"
+            class="close-btn pa-0 ma-0"
             color="primary"
             variant="plain"
+            :ripple="false"
             @click="proceed(closeAction)"
           >
             <v-icon size="32px">
@@ -148,4 +149,10 @@ export default defineComponent({
   height: 24px;
   width: 24px;
 }
+.close-btn {
+  position: fixed;
+  right: 20px;
+  top: 35px;
+}
+
 </style>

ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue

@@ -447,7 +447,8 @@ export default defineComponent({
       getIsManualLocation,
       getMhrRegistrationOwnLand,
       isMhrManufacturerRegistration,
-      getMhrInfoValidation
+      getMhrInfoValidation,
+      getMhrTransportPermit
     } = storeToRefs(useStore())
 
     const {
@@ -462,8 +463,8 @@ export default defineComponent({
     const { required, notEqualTo, customRules } = useInputRules()
 
     const localState = reactive({
-      currentPadNumber: getMhrRegistrationLocation.value.pad,
-      newTransportPermitPadNumber: getMhrRegistrationLocation.value.pad,
+      currentPadNumber: getMhrTransportPermit.value.newLocation.pad || getMhrRegistrationLocation.value.pad,
+      newTransportPermitPadNumber: getMhrTransportPermit.value.newLocation.pad || getMhrRegistrationLocation.value.pad,
       includesPid: computed((): boolean => {
         return [HomeLocationTypes.OTHER_STRATA, HomeLocationTypes.OTHER_TYPE]
           .includes(getMhrRegistrationLocation.value.otherType)
@@ -527,7 +528,7 @@ export default defineComponent({
     watch(() => localState.newTransportPermitPadNumber, (val) => {
       setMhrTransportPermitNewLocation({ key: 'pad', value: val })
       // new Pad should be different than the current one
-      setValidation('isNewPadNumberValid', localState.currentPadNumber !== val)
+      setValidation('isNewPadNumberValid', val && localState.currentPadNumber !== val)
     })
 
     watch(() => props.validate, async () => {

ppr-ui/src/components/mhrTransportPermit/LocationChange.vue

@@ -139,7 +139,7 @@ import { HomeLocationTypes, LocationChangeTypes } from "@/enums"
 import { ContentIF, FormIF } from "@/interfaces"
 import { locationChangeTypes } from "@/resources/mhr-transfers/transport-permits"
 import { useStore } from "@/store/store"
-import { reactive, computed, watch, ref, onMounted, nextTick } from "vue"
+import { reactive, computed, watch, ref, nextTick } from "vue"
 import { FormCard } from "../common"
 import { HomeCivicAddress, HomeLandOwnership, HomeLocationType } from "../mhrRegistration"
 import { CivicAddressSchema } from '@/schemas/civic-address'
@@ -156,12 +156,14 @@ const props = defineProps<{
   content?: ContentIF
 }>()
 
+const emit = defineEmits(['updateLocationType'])
+
 const { isRoleQualifiedSupplier, getMhrRegistrationLocation,
   setMhrTransportPermit, setMhrTransportPermitNewLocation } = useStore()
 
 const { hasUnsavedChanges, getMhrTransportPermit, getMhrInfoValidation } = storeToRefs(useStore())
 
-const { setLocationChangeType, initTransportPermit, resetTransportPermit } = useTransportPermits()
+const { setLocationChangeType, resetTransportPermit } = useTransportPermits()
 
 const {
   setValidation,
@@ -190,10 +192,6 @@ const state = reactive({
   showChangeTransportPermitLocationTypeDialog: false
 })
 
-onMounted(async (): Promise<void> => {
-  initTransportPermit()
-})
-
 const handleTaxCertificateUpdate = (date: string) => {
   setMhrTransportPermitNewLocation({ key: 'taxExpiryDate', value: date })
   setMhrTransportPermitNewLocation({ key: 'taxCertificate', value: !!date })
@@ -237,7 +235,7 @@ const handleLocationTypeChange = (locationType: LocationChangeTypes) => {
   if (locationType !== state.prevLocationChangeType && hasUnsavedChanges.value && hasTypeSelected) {
     state.showChangeTransportPermitLocationTypeDialog = true
   } else {
-    state.prevLocationChangeType = hasTypeSelected ? cloneDeep(locationType) : null
+    state.prevLocationChangeType = cloneDeep(locationType)
     selectLocationType(locationType)
   }
 }
@@ -250,6 +248,8 @@ const handleChangeTransportPermitLocationTypeResp = (proceed: boolean) => {
     selectLocationType(cloneDeep(state.locationChangeType))
     // when changing Location Type update the validation for it after reset
     setValidation('isLocationChangeTypeValid', true)
+    // emit location change to reset page validations
+    emit('updateLocationType')
   } else {
     selectLocationType(cloneDeep(state.prevLocationChangeType))
   }

ppr-ui/src/composables/mhrInformation/useMhrInformation.ts

@@ -91,6 +91,9 @@ export const useMhrInformation = () => {
     isFrozenMhr: computed((): boolean => {
       return getMhrInformation.value.statusType === MhApiStatusTypes.FROZEN
     }),
+    isExemptMhr: computed((): boolean => {
+      return getMhrInformation.value.statusType === MhApiStatusTypes.EXEMPT
+    }),
     isFrozenMhrDueToAffidavit: computed((): boolean => {
       return localState.isFrozenMhr &&
         getMhrInformation.value?.frozenDocumentType === MhApiFrozenDocumentTypes.TRANS_AFFIDAVIT

ppr-ui/src/composables/mhrInformation/useTransportPermits.ts

@@ -5,12 +5,16 @@ import { storeToRefs } from 'pinia'
 import { locationChangeTypes } from '@/resources/mhr-transfers/transport-permits'
 import { LocationChangeTypes } from '@/enums/transportPermits'
 import { MhrRegistrationHomeLocationIF, MhrTransportPermitIF } from '@/interfaces'
+import { APIRegistrationTypes, UnitNoteDocTypes } from '@/enums'
 
 // Global constants
 const isChangeLocationActive: Ref<boolean> = ref(false)
 
 export const useTransportPermits = () => {
-  const { isRoleStaffReg, isRoleQualifiedSupplier } = storeToRefs(useStore())
+  const { isRoleStaffReg,
+    isRoleQualifiedSupplier ,
+    getLienRegistrationType,  getMhrUnitNotes
+  } = storeToRefs(useStore())
 
   const {
     setEmptyMhrTransportPermit,
@@ -40,6 +44,24 @@ export const useTransportPermits = () => {
     return locationChangeTypes.find(item => item.type === locationChangeType)?.feeSummaryTitle
   }
 
+  const isTransportPermitDisabledQS = computed((): boolean =>
+    // QS role check
+    isRoleQualifiedSupplier.value &&
+    // PPR Liens check
+    [APIRegistrationTypes.LAND_TAX_LIEN,
+    APIRegistrationTypes.MAINTENANCE_LIEN,
+    APIRegistrationTypes.MANUFACTURED_HOME_NOTICE]
+      .includes(getLienRegistrationType.value as APIRegistrationTypes) &&
+    // Unit Notes check
+    getMhrUnitNotes.value
+      .map(note => note.documentType)
+      .some(note => [
+        UnitNoteDocTypes.NOTICE_OF_TAX_SALE,
+        UnitNoteDocTypes.CONFIDENTIAL_NOTE,
+        UnitNoteDocTypes.RESTRAINING_ORDER]
+        .includes(note))
+  )
+
   const resetTransportPermit = async (shouldResetLocationChange: boolean = false): Promise<void> => {
     setEmptyMhrTransportPermit(initTransportPermit())
     shouldResetLocationChange && setLocationChange(false)
@@ -114,6 +136,7 @@ export const useTransportPermits = () => {
     resetTransportPermit,
     isChangeLocationActive,
     isChangeLocationEnabled,
+    isTransportPermitDisabledQS,
     setLocationChange,
     setLocationChangeType,
     getUiLocationType,

ppr-ui/src/views/mhrInformation/MhrInformation.vue

@@ -297,9 +297,9 @@
                 <div class="pt-4 mb-15">
                   <MhrTransportPermit
                     v-if="isChangeLocationEnabled"
-                    :disable="showTransferType || (isFrozenMhr || (hasLien && !isLienRegistrationTypeSA))"
+                    :disable="isTransportPermitDisabled"
                     :validate="validate"
-                    @updateLocationType="setLocationChangeType($event)"
+                    @updateLocationType="validate = false"
                     @cancelTransportPermitChanges="handleCancelTransportPermitChanges()"
                   />
                   <HomeLocationReview
@@ -478,7 +478,8 @@ import {
   MhApiStatusTypes,
   RouteNames,
   UIMHRSearchTypes,
-  LocationChangeTypes
+  LocationChangeTypes,
+  UnitNoteDocTypes
 } from '@/enums'
 import {
   useAuth,
@@ -586,7 +587,8 @@ export default defineComponent({
       setMhrTransferType,
       setMhrTransferDeclaredValue,
       setEmptyMhrTransfer,
-      setStaffPayment
+      setStaffPayment,
+      setEmptyMhrTransportPermit
     } = useStore()
     const {
       // Getters
@@ -612,6 +614,8 @@ export default defineComponent({
     const {
       isFrozenMhr,
       isFrozenMhrDueToAffidavit,
+      isExemptMhr,
+      getLienInfo,
       buildApiData,
       initMhrTransfer,
       getUiTransferType,
@@ -642,8 +646,17 @@ export default defineComponent({
     } = useTransferOwners()
 
     const { getActiveExemption } = useExemptions()
-    const { isChangeLocationActive, isChangeLocationEnabled, setLocationChange, getUiFeeSummaryLocationType,
-      getUiLocationType, resetTransportPermit, setLocationChangeType } = useTransportPermits()
+    const {
+      isChangeLocationActive,
+      isChangeLocationEnabled,
+      isTransportPermitDisabledQS,
+      setLocationChange,
+      getUiFeeSummaryLocationType,
+      getUiLocationType,
+      resetTransportPermit,
+      setLocationChangeType,
+      initTransportPermit
+    } = useTransportPermits()
 
     // Refs
     const homeOwnersComponentRef = ref(null) as Component
@@ -671,6 +684,11 @@ export default defineComponent({
       showIncompleteRegistrationDialog: false,
       showStartTransferRequiredDialog: false,
       showCancelTransportPermitDialog: false,
+      isTransportPermitDisabled: computed((): boolean =>
+        localState.showTransferType ||
+        isExemptMhr.value ||
+        isTransportPermitDisabledQS.value
+      ),
       hasLienInfoDisplayed: false, // flag to track if lien info has been displayed after API check
       transportPermitLocationType: computed((): LocationChangeTypes => getMhrTransportPermit.value.locationChangeType),
       validateHomeLocationReview: computed((): boolean =>
@@ -784,6 +802,7 @@ export default defineComponent({
 
       localState.loading = true
       setEmptyMhrTransfer(initMhrTransfer())
+      setEmptyMhrTransportPermit(initTransportPermit())
 
       // Set baseline MHR Information to state
       await parseMhrInformation(isFrozenMhr.value)
@@ -1208,6 +1227,7 @@ export default defineComponent({
       getMhrInfoValidation,
       isValidTransportPermit,
       isValidTransfer,
+      getLienInfo,
       ...toRefs(localState)
     }
   }

ppr-ui/src/views/mhrInformation/MhrTransportPermit.vue

@@ -169,6 +169,7 @@
         <LocationChange
           ref="locationChangeRef"
           :validate="validate"
+          @updateLocationType="emit('updateLocationType')"
         />
       </section>
     </template>
@@ -188,7 +189,7 @@ const { disable = false, validate = false } = defineProps<{
   validate: boolean
 }>()
 
-const emit = defineEmits(['cancelTransportPermitChanges'])
+const emit = defineEmits(['updateLocationType', 'cancelTransportPermitChanges'])
 
 const { setMhrTransportPermit } = useStore()
 
@@ -203,7 +204,6 @@ const state = reactive({
   transportPermitDocumentId: computed(() => getMhrTransportPermit.value.documentId)
 })
 
-
 const toggleLocationChange = () => {
   if (isChangeLocationActive.value) {
     // trigger cancel dialog

ppr-ui/tests/unit/MhrTransportPermit.spec.ts

@@ -4,7 +4,8 @@ import { beforeEach, expect } from 'vitest'
 import { DocumentId, FormCard, SimpleHelpToggle } from '@/components/common'
 import { nextTick } from 'vue'
 import flushPromises from 'flush-promises'
-import { LocationChange, TaxCertificate } from '@/components/mhrTransfers'
+import { TaxCertificate } from '@/components/mhrTransfers'
+import { LocationChange } from '@/components/mhrTransportPermit'
 import { AuthRoles, LocationChangeTypes, ProductCode } from '@/enums'
 import { useStore } from '@/store/store'
 import { HomeLocationType, HomeCivicAddress, HomeLandOwnership } from '@/components/mhrRegistration'