From 6874eff6d1c9fcf498fb30f81217ebf68e67b7bd Mon Sep 17 00:00:00 2001
From: Dima K <dima1086@hotmail.com>
Date: Wed, 15 Nov 2023 19:24:25 -0800
Subject: [PATCH 1/2] Add Lien Msg for Res Exemptions

---
 ppr-ui/src/assets/styles/theme.scss           |  4 +
 ppr-ui/src/resources/index.ts                 |  1 +
 ppr-ui/src/resources/lienMessages.ts          |  6 ++
 ppr-ui/src/store/store.ts                     |  4 +
 .../views/mhrInformation/MhrInformation.vue   | 99 ++++++++++++-------
 5 files changed, 79 insertions(+), 35 deletions(-)
 create mode 100644 ppr-ui/src/resources/lienMessages.ts

diff --git a/ppr-ui/src/assets/styles/theme.scss b/ppr-ui/src/assets/styles/theme.scss
index d60bcb6e4..dc8092815 100644
--- a/ppr-ui/src/assets/styles/theme.scss
+++ b/ppr-ui/src/assets/styles/theme.scss
@@ -49,6 +49,10 @@ $BCgovAGold2: #fff8ef;
 $BCgovAGold3: #ffe0bc;
 $BCgovAGold4: #ffd4a2;
 
+// Warning Colors
+$warning: #FCBA19;
+$backgroundWarning: #FFF7E3;
+
 // Error Colors
 $BCgovInputError: #ff5252;
 $error: #D3272C;
diff --git a/ppr-ui/src/resources/index.ts b/ppr-ui/src/resources/index.ts
index 2afd590a8..2ff592161 100644
--- a/ppr-ui/src/resources/index.ts
+++ b/ppr-ui/src/resources/index.ts
@@ -22,3 +22,4 @@ export * from './contactInformationContent'
 export * from './userAccessOrgLookup'
 export * from './userAccessRequirements'
 export * from './exemptions'
+export * from './lienMessages'
diff --git a/ppr-ui/src/resources/lienMessages.ts b/ppr-ui/src/resources/lienMessages.ts
new file mode 100644
index 000000000..5d904b906
--- /dev/null
+++ b/ppr-ui/src/resources/lienMessages.ts
@@ -0,0 +1,6 @@
+/* eslint-disable max-len */
+export const LienMessages = {
+  defaultWarning: 'There is a lien pertaining to this home. You can view liens against the manufactured home in the Personal Property Registry by conducting a combined Manufactured Home Registry and PPR search.',
+  QSError: 'There is at least one lien pertaining to this manufactured home that may be preventing some changes to this home. Any liens preventing changes must be either discharged or have prescribed conditions met before making changes. If prescribed conditions have been met, changes cannot be completed online and must be registered by BC Registries staff. You can view liens against the manufactured home in the PPR by conducting a combined Manufactured Home Registry and PPR search.',
+  exemptionsWarning: 'There is a PPSA (Personal Property Security Act) security interest pertaining to this manufactured home. You must have consent of each Secured Party in the agreement to continue. You can view liens against the manufactured home in the Personal Property Registry by conducting a combined Manufactured Home Registry and PPR search.'
+}
diff --git a/ppr-ui/src/store/store.ts b/ppr-ui/src/store/store.ts
index a2cf6aa1e..aa284ed69 100644
--- a/ppr-ui/src/store/store.ts
+++ b/ppr-ui/src/store/store.ts
@@ -644,6 +644,9 @@ export const useStore = defineStore('assetsStore', () => {
     // Current state is to verify the property exists. Future state may be more granular dependent on type.
     return !!state.value.mhrInformation.lienRegistrationType
   })
+  const getLienRegistrationType = computed<string>(() => {
+    return state.value.mhrInformation.lienRegistrationType
+  })
   const getMhrUnitNotes: ComputedRef<Array<UnitNoteIF | CancelUnitNoteIF>> =
     computed<Array<UnitNoteIF | CancelUnitNoteIF>>(() => {
       return state.value.mhrUnitNotes
@@ -1365,6 +1368,7 @@ export const useStore = defineStore('assetsStore', () => {
 
     // Lien-related getter
     hasLien,
+    getLienRegistrationType,
 
     // Mhr Info Validation State
     getMhrInfoValidation,
diff --git a/ppr-ui/src/views/mhrInformation/MhrInformation.vue b/ppr-ui/src/views/mhrInformation/MhrInformation.vue
index 38e2b22f9..819b91499 100644
--- a/ppr-ui/src/views/mhrInformation/MhrInformation.vue
+++ b/ppr-ui/src/views/mhrInformation/MhrInformation.vue
@@ -38,6 +38,39 @@
                 }}
               </h1>
                 <template v-if="!isReviewMode">
+                   <!-- Lien Information -->
+                  <v-row v-if="hasLien" id="lien-information" no-gutters class="pt-10">
+                    <v-card
+                      id="important-message"
+                      class="rounded-0 px-8 py-5"
+                      :class="getLienInfo.class"
+                      outlined
+                    >
+                      <v-icon v-if="getLienInfo.class === 'error'" color="error" class="float-left mr-2 mt-n1">
+                        mdi-alert
+                      </v-icon>
+                      <p :class="getLienInfo.class === 'warning' ? 'mb-0' : 'mb-0 pl-8'">
+                        <strong>Important:</strong> {{ getLienInfo.msg }}
+                      </p>
+                    </v-card>
+
+                    <v-col class="mt-5">
+                      <v-btn
+                        outlined
+                        color="primary"
+                        class="mt-2 px-6"
+                        :ripple="false"
+                        data-test-id="lien-search-btn"
+                        @click="quickMhrSearch(getMhrInformation.mhrNumber)"
+                      >
+                        <v-icon class="pr-1">mdi-magnify</v-icon>
+                        Conduct a Combined MHR and PPR Search for MHR Number
+                        <strong>{{ getMhrInformation.mhrNumber }}</strong>
+                      </v-btn>
+                      <v-divider class="mx-0 mt-10 mb-6" />
+                    </v-col>
+                  </v-row>
+
                   <p class="mt-7">
                     This is the current information for this registration as of
                     <span class="font-weight-bold">{{ asOfDateTime }}</span>.
@@ -88,36 +121,6 @@
               </v-col>
             </v-row>
 
-            <!-- Lien Information -->
-            <v-row v-if="hasLien" id="lien-information" no-gutters>
-              <v-card outlined id="important-message" class="rounded-0 mt-2 pt-5 px-5">
-                <v-icon color="error" class="float-left mr-2 mt-n1">mdi-alert</v-icon>
-                <p class="d-block pl-8">
-                  <strong>Important:</strong> There is a lien against this manufactured home preventing transfer. This
-                  registration cannot be transferred until all liens filed in the Personal Property Registry (PPR)
-                  against the manufactured home have been discharged or a written consent from each secured party named
-                  in such lien(s) is provided. You can view liens against the manufactured home in the PPR by conducting
-                  a combined Manufactured Home Registry and PPR search.
-                </p>
-              </v-card>
-
-              <v-col class="mt-3">
-                <v-btn
-                  outlined
-                  color="primary"
-                  class="mt-2 px-6"
-                  :ripple="false"
-                  data-test-id="lien-search-btn"
-                  @click="quickMhrSearch(getMhrInformation.mhrNumber)"
-                >
-                  <v-icon class="pr-1">mdi-magnify</v-icon>
-                  Conduct a Combined MHR and PPR Search for MHR Number
-                  <strong>{{ getMhrInformation.mhrNumber }}</strong>
-                </v-btn>
-                <v-divider class="mx-0 mt-10 mb-6" />
-              </v-col>
-            </v-row>
-
             <CautionBox
               v-if="isReviewMode && !isTransferToExecutorProbateWill && !isTransferDueToSaleOrGift"
               class="mt-3 mb-5"
@@ -254,7 +257,7 @@
                         class="pl-1"
                         color="primary"
                         :ripple="false"
-                        :disabled="isFrozenMhr && !isRoleStaffReg"
+                        :disabled="(isFrozenMhr || (hasLien && !isLienRegistrationTypeSA)) && !isRoleStaffReg"
                         @click="toggleTypeSelector()"
                       >
                         <span v-if="!showTransferType">
@@ -386,7 +389,7 @@ import { HomeLocationReview, YourHomeReview } from '@/components/mhrRegistration
 import { HomeOwners } from '@/views'
 import { UnitNotePanels } from '@/components/unitNotes'
 import { BaseDialog } from '@/components/dialogs'
-import { QSLockedStateUnitNoteTypes, submittingPartyChangeContent, UnitNotesInfo } from '@/resources'
+import { LienMessages, QSLockedStateUnitNoteTypes, submittingPartyChangeContent, UnitNotesInfo } from '@/resources'
 import { cancelOwnerChangeConfirm, transferRequiredDialog, unsavedChangesDialog } from '@/resources/dialogOptions'
 import AccountInfo from '@/components/common/AccountInfo.vue'
 /* eslint-disable no-unused-vars */
@@ -401,6 +404,7 @@ import {
 import { StaffPaymentIF } from '@bcrs-shared-components/interfaces'
 import {
   APIMHRMapSearchTypes,
+  APIRegistrationTypes,
   APISearchTypes,
   ApiTransferTypes,
   MhApiStatusTypes,
@@ -482,6 +486,7 @@ export default defineComponent({
       getCertifyInformation,
       hasUnsavedChanges,
       hasLien,
+      getLienRegistrationType,
       isRoleStaffReg,
       isRoleQualifiedSupplier,
       getMhrTransferDocumentId,
@@ -595,6 +600,20 @@ export default defineComponent({
       isDraft: computed((): boolean => {
         return getMhrInformation.value.draftNumber
       }),
+      isLienRegistrationTypeSA: computed((): boolean => {
+        return getLienRegistrationType.value === APIRegistrationTypes.SECURITY_AGREEMENT
+      }),
+      getLienInfo: computed((): { class: string, msg: string } => {
+        if (isRoleStaffReg.value || (isRoleQualifiedSupplier.value && localState.isLienRegistrationTypeSA)) {
+          return { class: 'warning', msg: LienMessages.defaultWarning }
+        } else if (isRoleQualifiedSupplier.value) {
+          return { class: 'error', msg: LienMessages.QSError }
+        } else if (isRoleQualifiedSupplier.value &&
+          localState.hasActiveExemption &&
+          localState.isLienRegistrationTypeSA) {
+          return { class: 'warning', msg: LienMessages.exemptionsWarning }
+        }
+      }),
       /** True if Jest is running the code. */
       isJestRunning: computed((): boolean => {
         return process.env.JEST_WORKER_ID !== undefined
@@ -718,7 +737,7 @@ export default defineComponent({
       await nextTick()
 
       // Prevent proceeding when Lien present
-      if (hasLien.value) {
+      if (hasLien.value && (isRoleQualifiedSupplier.value && !localState.isLienRegistrationTypeSA)) {
         await scrollToFirstError(true)
         return
       }
@@ -980,7 +999,9 @@ export default defineComponent({
       quickMhrSearch,
       handleDialogResp,
       hasLien,
+      getLienRegistrationType,
       isRoleStaffReg,
+      isRoleQualifiedSupplier,
       isTransferDueToDeath,
       isTransferDueToSaleOrGift,
       isTransferToExecutorProbateWill,
@@ -1016,8 +1037,16 @@ export default defineComponent({
 }
 
 #important-message {
-  background-color: $backgroundError !important;
-  border-color: $error;
+
+  &.warning {
+    background-color: $backgroundWarning !important;
+    border-color: $warning;
+  }
+
+  &.error {
+    background-color: $backgroundError !important;
+    border-color: $error;
+  }
 
   p {
     line-height: 22px;

From fca9ee084ee3ea18c320f3f8a0711ade21908138 Mon Sep 17 00:00:00 2001
From: Dima K <dima1086@hotmail.com>
Date: Fri, 17 Nov 2023 12:33:45 -0800
Subject: [PATCH 2/2] Refactor and add LienAlert component for Transfers and
 Exemptions

---
 ppr-ui/src/components/common/LienAlert.vue    | 140 ++++++++++++++++++
 ppr-ui/src/components/common/index.ts         |   1 +
 .../src/components/tables/common/TableRow.vue |  40 ++++-
 .../mhrInformation/useMhrInfoValidation.ts    |   7 +-
 .../mhrInformation/useMhrInformation.ts       |  39 ++++-
 .../src/views/exemption/ExemptionDetails.vue  |  11 +-
 .../src/views/exemption/ExemptionReview.vue   |  13 +-
 .../views/mhrInformation/MhrInformation.vue   |  84 ++---------
 ppr-ui/tests/unit/ExemptionDetails.spec.ts    |   3 +-
 ppr-ui/tests/unit/ExemptionReview.spec.ts     |   5 +
 ppr-ui/tests/unit/MhrInformation.spec.ts      |   6 +-
 11 files changed, 263 insertions(+), 86 deletions(-)
 create mode 100644 ppr-ui/src/components/common/LienAlert.vue

diff --git a/ppr-ui/src/components/common/LienAlert.vue b/ppr-ui/src/components/common/LienAlert.vue
new file mode 100644
index 000000000..03ed40d2b
--- /dev/null
+++ b/ppr-ui/src/components/common/LienAlert.vue
@@ -0,0 +1,140 @@
+<template>
+  <!-- Lien Information -->
+  <v-row id="lien-information" no-gutters class="pt-10">
+    <v-card
+      id="important-message"
+      class="rounded-0 px-8 py-5"
+      :class="lienInfo.class"
+      outlined
+    >
+      <v-icon v-if="lienInfo.class === 'error'" color="error" class="float-left mr-2 mt-n1">
+        mdi-alert
+      </v-icon>
+      <p :class="lienInfo.class === 'warning' ? 'mb-0' : 'mb-0 pl-8'">
+        <strong>Important:</strong> {{ lienInfo.msg }}
+      </p>
+    </v-card>
+
+    <v-col class="mt-5">
+      <v-btn
+        outlined
+        color="primary"
+        class="mt-2 px-6"
+        :ripple="false"
+        data-test-id="lien-search-btn"
+        @click="quickMhrSearch(mhrNumber)"
+      >
+        <v-icon class="pr-1">mdi-magnify</v-icon>
+        Conduct a Combined MHR and PPR Search for MHR Number
+        <strong>{{ mhrNumber }}</strong>
+      </v-btn>
+      <v-divider class="mx-0 mt-10 mb-6" />
+    </v-col>
+  </v-row>
+</template>
+
+<script lang="ts">
+import { useRouter } from 'vue2-helpers/vue-router'
+import { useMhrInformation } from '@/composables'
+import { APIMHRMapSearchTypes, APISearchTypes, RouteNames, UIMHRSearchTypes } from '@/enums'
+import { useStore } from '@/store/store'
+import { mhrSearch } from '@/utils'
+import { storeToRefs } from 'pinia'
+import {
+  computed,
+  defineComponent,
+  reactive,
+  toRefs
+} from 'vue-demi'
+
+export default defineComponent({
+  name: 'LienAlert',
+  props: {
+    setEndDate: { type: String }
+  },
+  emits: ['isLoading'],
+  setup (props, { emit }) {
+    const router = useRouter()
+
+    const {
+      setSearchedType,
+      setManufacturedHomeSearchResults
+    } = useStore()
+
+    const {
+      getMhrInformation
+    } = storeToRefs(useStore())
+
+    const {
+      getLienInfo
+    } = useMhrInformation()
+
+    const localState = reactive({
+      mhrNumber: getMhrInformation.value.mhrNumber,
+      lienInfo: computed(() => getLienInfo())
+    })
+
+    const quickMhrSearch = async (mhrNumber: string): Promise<void> => {
+      emit('isLoading', true)
+
+      // Search for current Manufactured Home Registration Number
+      const results = await mhrSearch({
+        type: APISearchTypes.MHR_NUMBER,
+        criteria: { value: mhrNumber },
+        clientReferenceId: ''
+      }, '')
+
+      emit('isLoading', false)
+
+      if (results) {
+        // Set search type to satisfy UI requirements
+        await setSearchedType({
+          searchTypeUI: UIMHRSearchTypes.MHRMHR_NUMBER,
+          searchTypeAPI: APIMHRMapSearchTypes.MHRMHR_NUMBER
+        })
+
+        // There is only 1 result for a mhr number search
+        // Include lien info by default
+        results.results[0].includeLienInfo = true
+
+        await setManufacturedHomeSearchResults(results)
+        await router.replace({
+          name: RouteNames.MHRSEARCH
+        })
+      } else {
+        console.error('Error: MHR_NUMBER expected, but not found.')
+      }
+    }
+
+    return {
+      quickMhrSearch,
+      ...toRefs(localState)
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+#important-message {
+
+  &.warning {
+    background-color: $backgroundWarning !important;
+    border-color: $warning;
+  }
+
+  &.error {
+    background-color: $backgroundError !important;
+    border-color: $error;
+  }
+
+  p {
+    line-height: 22px;
+    font-size: $px-14;
+    letter-spacing: 0.01rem;
+    color: $gray7;
+  }
+}
+
+</style>
diff --git a/ppr-ui/src/components/common/index.ts b/ppr-ui/src/components/common/index.ts
index 309ebb72a..85e8567f5 100644
--- a/ppr-ui/src/components/common/index.ts
+++ b/ppr-ui/src/components/common/index.ts
@@ -35,3 +35,4 @@ export { default as PartyReview } from './PartyReview.vue'
 export { default as FormCard } from './FormCard.vue'
 export { default as OrgNameLookup } from './OrgNameLookup.vue'
 export { default as ReviewCard } from './ReviewCard.vue'
+export { default as LienAlert } from './LienAlert.vue'
diff --git a/ppr-ui/src/components/tables/common/TableRow.vue b/ppr-ui/src/components/tables/common/TableRow.vue
index 3db5abd78..63817f3cf 100644
--- a/ppr-ui/src/components/tables/common/TableRow.vue
+++ b/ppr-ui/src/components/tables/common/TableRow.vue
@@ -400,12 +400,35 @@
               <v-list-item
                 v-if="isExemptionEnabled && !hasChildResExemption(item) &&
                   ![HomeLocationTypes.HOME_PARK, HomeLocationTypes.LOT].includes(item.locationType)"
-                @click="openExemption(UnitNoteDocTypes.RESIDENTIAL_EXEMPTION_ORDER, item)"
+                 @click="hasLienForQS || hasLockedForQS
+                  ? null
+                  : openExemption(UnitNoteDocTypes.RESIDENTIAL_EXEMPTION_ORDER, item)"
                 data-test-id="res-exemption-btn"
               >
                 <v-list-item-subtitle>
-                  <img alt="exemption-icon" class="ml-0 icon-small" src="@/assets/svgs/ic_exemption.svg" />
-                  <span class="ml-1">Residential Exemption</span>
+                  <v-tooltip
+                    v-if="hasLienForQS || hasLockedForQS"
+                    left
+                    nudge-left="18"
+                    content-class="left-tooltip pa-5"
+                    transition="fade-transition"
+                  >
+                    <template v-slot:activator="{ on }">
+                      <span v-on="on" class="disabled-text">
+                        <img alt="exemption-icon" class="ml-0 icon-small" src="@/assets/svgs/ic_exemption.svg" />
+                        Residential Exemption tooltip
+                      </span>
+                    </template>
+                    {{ hasLienForQS
+                      ? 'There is a lien on this home preventing an exemption to be filed.'
+                      : `There is a lock on this home preventing an exemption to be filed.
+                      If you require further information please contact BC Registries staff.`
+                    }}
+                  </v-tooltip>
+                  <span v-else>
+                    <img alt="exemption-icon" class="ml-0 icon-small" src="@/assets/svgs/ic_exemption.svg" />
+                    Residential Exemption
+                  </span>
                 </v-list-item-subtitle>
               </v-list-item>
               <v-list-item
@@ -579,7 +602,15 @@ export default defineComponent({
       enableOpenEdit: computed(() => {
         return (isRoleQualifiedSupplier.value || isRoleStaffReg.value || isRoleStaff.value) &&
           !isRoleStaffSbc.value && !isRoleStaffBcol.value
-      })
+      }),
+      hasLienForQS: computed(() =>
+        isRoleQualifiedSupplier.value &&
+        localState.item.lienRegistrationType &&
+        localState.item.lienRegistrationType !== APIRegistrationTypes.SECURITY_AGREEMENT
+      ),
+      hasLockedForQS: computed(() =>
+        hasLockedState(localState.item) && isRoleQualifiedSupplier.value
+      )
     })
 
     const deleteDraft = (item: DraftResultIF): void => {
@@ -904,6 +935,7 @@ export default defineComponent({
       isRenewalDisabled,
       isRepairersLienAmendDisabled,
       isRoleStaffReg,
+      isRoleQualifiedSupplier,
       isExemptionEnabled,
       hasChildResExemption,
       hasRenewal,
diff --git a/ppr-ui/src/composables/mhrInformation/useMhrInfoValidation.ts b/ppr-ui/src/composables/mhrInformation/useMhrInfoValidation.ts
index 782031e9d..8a6d053a2 100644
--- a/ppr-ui/src/composables/mhrInformation/useMhrInfoValidation.ts
+++ b/ppr-ui/src/composables/mhrInformation/useMhrInfoValidation.ts
@@ -4,7 +4,7 @@ import {
   MhrRegistrationHomeOwnerIF
 } from '@/interfaces'
 import { computed } from 'vue-demi'
-import { useHomeOwners, useTransferOwners } from '@/composables'
+import { useHomeOwners, useMhrInformation, useTransferOwners } from '@/composables'
 import { ActionTypes } from '@/enums'
 import { storeToRefs } from 'pinia'
 
@@ -21,6 +21,9 @@ export const useMhrInfoValidation = (validationState: mhrInfoValidationStateIF)
   const {
     isTransferDueToDeath
   } = useTransferOwners()
+  const {
+    getLienInfo
+  } = useMhrInformation()
 
   /** Set specified flag */
   const setValidation = (propertyKey: string, isValid: boolean): void => {
@@ -52,7 +55,7 @@ export const useMhrInfoValidation = (validationState: mhrInfoValidationStateIF)
       validationState.isValidTransferType &&
       validationState.isValidTransferOwners &&
       (isTransferDueToDeath.value || validationState.isTransferDetailsValid) &&
-      !hasLien.value
+      (!hasLien.value || getLienInfo().isSubmissionAllowed)
     )
   })
 
diff --git a/ppr-ui/src/composables/mhrInformation/useMhrInformation.ts b/ppr-ui/src/composables/mhrInformation/useMhrInformation.ts
index a5dc015ea..3a7d5a532 100644
--- a/ppr-ui/src/composables/mhrInformation/useMhrInformation.ts
+++ b/ppr-ui/src/composables/mhrInformation/useMhrInformation.ts
@@ -9,6 +9,7 @@ import {
 } from '@/interfaces'
 import { useStore } from '@/store/store'
 import {
+  APIRegistrationTypes,
   ActionTypes,
   ApiHomeTenancyTypes,
   ApiTransferTypes,
@@ -21,10 +22,10 @@ import {
 } from '@/enums'
 import { fetchMhRegistration, normalizeObject, parseAccountToSubmittingParty } from '@/utils'
 import { cloneDeep } from 'lodash'
-import { useHomeOwners, useTransferOwners } from '@/composables'
+import { useExemptions, useHomeOwners, useTransferOwners } from '@/composables'
 import { computed, reactive, toRefs } from 'vue-demi'
 import { storeToRefs } from 'pinia'
-import { QSLockedStateUnitNoteTypes } from '@/resources'
+import { LienMessages, QSLockedStateUnitNoteTypes } from '@/resources'
 
 export const useMhrInformation = () => {
   const {
@@ -60,7 +61,8 @@ export const useMhrInformation = () => {
     getMhrTransferHomeOwnerGroups,
     getMhrTransferCurrentHomeOwnerGroups,
     getMhrTransferDocumentId,
-    getMhrTransferType
+    getMhrTransferType,
+    getLienRegistrationType
   } = storeToRefs(useStore())
 
   const {
@@ -71,6 +73,8 @@ export const useMhrInformation = () => {
     getCurrentOwnerGroupIdByOwnerId
   } = useTransferOwners()
 
+  const { getActiveExemption } = useExemptions()
+
   /** Local State for custom computed properties. **/
   const localState = reactive({
     isFrozenMhr: computed((): boolean => {
@@ -190,6 +194,34 @@ export const useMhrInformation = () => {
       )]
   }
 
+  // Get information about the lien to help with styling and functionality
+  const getLienInfo = (): { class: string, msg: string, isSubmissionAllowed: boolean } => {
+    const hasActiveExemption = !!getActiveExemption()
+    const isLienRegistrationTypeSA = getLienRegistrationType.value === APIRegistrationTypes.SECURITY_AGREEMENT
+
+    if (isRoleStaffReg.value || (isRoleQualifiedSupplier.value && isLienRegistrationTypeSA)) {
+      return {
+        class: 'warning',
+        msg: LienMessages.defaultWarning,
+        isSubmissionAllowed: true
+      }
+    } else if (isRoleQualifiedSupplier.value) {
+      return {
+        class: 'error',
+        msg: LienMessages.QSError,
+        isSubmissionAllowed: false
+      }
+    } else if (isRoleQualifiedSupplier.value &&
+      hasActiveExemption &&
+      isLienRegistrationTypeSA) {
+      return {
+        class: 'warning',
+        msg: LienMessages.exemptionsWarning,
+        isSubmissionAllowed: true
+      }
+    }
+  }
+
   /** Draft Filings **/
   /**
    * Parse a draft MHR Information into State.
@@ -371,6 +403,7 @@ export const useMhrInformation = () => {
     parseMhrInformation,
     initDraftMhrInformation,
     parseSubmittingPartyInfo,
+    getLienInfo,
     ...toRefs(localState)
   }
 }
diff --git a/ppr-ui/src/views/exemption/ExemptionDetails.vue b/ppr-ui/src/views/exemption/ExemptionDetails.vue
index 0bb1d5c97..d60087263 100644
--- a/ppr-ui/src/views/exemption/ExemptionDetails.vue
+++ b/ppr-ui/src/views/exemption/ExemptionDetails.vue
@@ -1,5 +1,8 @@
 <template>
   <section id="exemption-details" aria-label="exemption-details">
+
+    <LienAlert v-if="hasLien" />
+
     <v-row no-gutters class="soft-corners-top">
       <v-col class="role" cols="auto" aria-label="exemption-help-content">
         <p class="mt-9">
@@ -80,7 +83,7 @@ import { pacificDate } from '@/utils'
 import { useStore } from '@/store/store'
 import { storeToRefs } from 'pinia'
 import { exDocIdContent, exRemarksContent } from '@/resources'
-import { CautionBox, DocumentId, Remarks, SimpleHelpToggle } from '@/components/common'
+import { CautionBox, DocumentId, Remarks, SimpleHelpToggle, LienAlert } from '@/components/common'
 import { HomeLocationReview, HomeOwnersReview, YourHomeReview } from '@/components/mhrRegistration/ReviewConfirm'
 import { useExemptions, useNavigation } from '@/composables'
 import { RouteNames } from '@/enums'
@@ -94,14 +97,15 @@ export default defineComponent({
     HomeLocationReview,
     SimpleHelpToggle,
     Remarks,
-    YourHomeReview
+    YourHomeReview,
+    LienAlert
   },
   props: { showErrors: { type: Boolean, default: false } },
   setup () {
     const { route } = useNavigation()
     const { updateValidation } = useExemptions()
     const { setValidation, setMhrExemptionNote, setMhrExemptionValue } = useStore()
-    const { getMhrExemption, isRoleStaffReg } = storeToRefs(useStore())
+    const { getMhrExemption, isRoleStaffReg, hasLien } = storeToRefs(useStore())
 
     const localState = reactive({
       localValidate: false,
@@ -131,6 +135,7 @@ export default defineComponent({
       handleRemarksUpdate,
       handleDocumentIdUpdate,
       updateValidation,
+      hasLien,
       ...toRefs(localState)
     }
   }
diff --git a/ppr-ui/src/views/exemption/ExemptionReview.vue b/ppr-ui/src/views/exemption/ExemptionReview.vue
index fb8d06f62..31d9b2e64 100644
--- a/ppr-ui/src/views/exemption/ExemptionReview.vue
+++ b/ppr-ui/src/views/exemption/ExemptionReview.vue
@@ -1,5 +1,8 @@
 <template>
   <section id="exemption-review" aria-label="exemption-review">
+
+    <LienAlert v-if="hasLien" />
+
     <v-row no-gutters class="soft-corners-top">
       <v-col class="role" cols="auto" aria-label="exemption-review-help">
         <h2 class="mt-10">Review and Confirm</h2>
@@ -160,7 +163,8 @@ import {
   FolioOrReferenceNumber,
   FormCard,
   PartyForm,
-  ReviewCard
+  ReviewCard,
+  LienAlert
 } from '@/components/common'
 import { StaffPayment } from '@bcrs-shared-components/staff-payment'
 import { useExemptions, usePayment } from '@/composables'
@@ -179,7 +183,8 @@ export default defineComponent({
     ListRequirements,
     PartyForm,
     ReviewCard,
-    StaffPayment
+    StaffPayment,
+    LienAlert
   },
   props: { showErrors: { type: Boolean, default: false } },
   setup () {
@@ -192,7 +197,8 @@ export default defineComponent({
       getMhrExemptionValidation,
       getStaffPayment,
       isRoleStaffReg,
-      isRoleQualifiedSupplier
+      isRoleQualifiedSupplier,
+      hasLien
     } = storeToRefs(useStore())
     const { updateValidation } = useExemptions()
     const { onStaffPaymentDataUpdate } = usePayment()
@@ -247,6 +253,7 @@ export default defineComponent({
       getMhrExemptionValidation,
       parseSubmittingPartyToAccountInfo,
       attentionExemptionConfig,
+      hasLien,
       ...toRefs(localState)
     }
   }
diff --git a/ppr-ui/src/views/mhrInformation/MhrInformation.vue b/ppr-ui/src/views/mhrInformation/MhrInformation.vue
index 819b91499..cbecb8c04 100644
--- a/ppr-ui/src/views/mhrInformation/MhrInformation.vue
+++ b/ppr-ui/src/views/mhrInformation/MhrInformation.vue
@@ -37,40 +37,10 @@
                   : `Manufactured Home Information${isDraft ? ' - Draft' : ''}`
                 }}
               </h1>
-                <template v-if="!isReviewMode">
-                   <!-- Lien Information -->
-                  <v-row v-if="hasLien" id="lien-information" no-gutters class="pt-10">
-                    <v-card
-                      id="important-message"
-                      class="rounded-0 px-8 py-5"
-                      :class="getLienInfo.class"
-                      outlined
-                    >
-                      <v-icon v-if="getLienInfo.class === 'error'" color="error" class="float-left mr-2 mt-n1">
-                        mdi-alert
-                      </v-icon>
-                      <p :class="getLienInfo.class === 'warning' ? 'mb-0' : 'mb-0 pl-8'">
-                        <strong>Important:</strong> {{ getLienInfo.msg }}
-                      </p>
-                    </v-card>
-
-                    <v-col class="mt-5">
-                      <v-btn
-                        outlined
-                        color="primary"
-                        class="mt-2 px-6"
-                        :ripple="false"
-                        data-test-id="lien-search-btn"
-                        @click="quickMhrSearch(getMhrInformation.mhrNumber)"
-                      >
-                        <v-icon class="pr-1">mdi-magnify</v-icon>
-                        Conduct a Combined MHR and PPR Search for MHR Number
-                        <strong>{{ getMhrInformation.mhrNumber }}</strong>
-                      </v-btn>
-                      <v-divider class="mx-0 mt-10 mb-6" />
-                    </v-col>
-                  </v-row>
+                <!-- Lien Information -->
+                <LienAlert v-if="hasLien" @isLoading="loading = $event" />
 
+                <template v-if="!isReviewMode">
                   <p class="mt-7">
                     This is the current information for this registration as of
                     <span class="font-weight-bold">{{ asOfDateTime }}</span>.
@@ -371,7 +341,8 @@ import {
   FolioOrReferenceNumber,
   ContactInformation,
   StickyContainer,
-  DocumentId
+  DocumentId,
+  LienAlert
 } from '@/components/common'
 import {
   useAuth,
@@ -389,7 +360,7 @@ import { HomeLocationReview, YourHomeReview } from '@/components/mhrRegistration
 import { HomeOwners } from '@/views'
 import { UnitNotePanels } from '@/components/unitNotes'
 import { BaseDialog } from '@/components/dialogs'
-import { LienMessages, QSLockedStateUnitNoteTypes, submittingPartyChangeContent, UnitNotesInfo } from '@/resources'
+import { QSLockedStateUnitNoteTypes, submittingPartyChangeContent, UnitNotesInfo } from '@/resources'
 import { cancelOwnerChangeConfirm, transferRequiredDialog, unsavedChangesDialog } from '@/resources/dialogOptions'
 import AccountInfo from '@/components/common/AccountInfo.vue'
 /* eslint-disable no-unused-vars */
@@ -444,7 +415,8 @@ export default defineComponent({
     ConfirmCompletion,
     YourHomeReview,
     StaffPayment,
-    UnitNotePanels
+    UnitNotePanels,
+    LienAlert
   },
   props: {
     appReady: {
@@ -552,6 +524,7 @@ export default defineComponent({
       showCancelDialog: false,
       showCancelChangeDialog: false,
       showStartTransferRequiredDialog: false,
+      hasLienInfoDisplayed: false, // flag to track if lien info has been displayed after API check
       hasActiveExemption: computed((): boolean => !!getActiveExemption()),
       transferRequiredDialogOptions: computed((): DialogOptionsIF => {
         transferRequiredDialog.text =
@@ -586,7 +559,10 @@ export default defineComponent({
         return isRoleStaffReg.value && localState.validate && !getInfoValidation('isStaffPaymentValid')
       }),
       transferErrorMsg: computed((): string => {
-        if (localState.validate && hasLien.value) return '< Lien on this home is preventing transfer'
+        if (localState.validate && hasLien.value &&
+          (isRoleQualifiedSupplier.value && !localState.isLienRegistrationTypeSA)) {
+          return '< Lien on this home is preventing transfer'
+        }
 
         const isValidReview = localState.isReviewMode ? isValidTransferReview.value : isValidTransfer.value
         return localState.validate && !isValidReview ? '< Please complete required information' : ''
@@ -603,17 +579,6 @@ export default defineComponent({
       isLienRegistrationTypeSA: computed((): boolean => {
         return getLienRegistrationType.value === APIRegistrationTypes.SECURITY_AGREEMENT
       }),
-      getLienInfo: computed((): { class: string, msg: string } => {
-        if (isRoleStaffReg.value || (isRoleQualifiedSupplier.value && localState.isLienRegistrationTypeSA)) {
-          return { class: 'warning', msg: LienMessages.defaultWarning }
-        } else if (isRoleQualifiedSupplier.value) {
-          return { class: 'error', msg: LienMessages.QSError }
-        } else if (isRoleQualifiedSupplier.value &&
-          localState.hasActiveExemption &&
-          localState.isLienRegistrationTypeSA) {
-          return { class: 'warning', msg: LienMessages.exemptionsWarning }
-        }
-      }),
       /** True if Jest is running the code. */
       isJestRunning: computed((): boolean => {
         return process.env.JEST_WORKER_ID !== undefined
@@ -745,12 +710,13 @@ export default defineComponent({
       // If already in review mode, file the transfer
       if (localState.isReviewMode) {
         // Verify no lien exists prior to submitting filing
-        const regSum = !localState.isJestRunning
+        const regSum = !localState.isJestRunning && !localState.hasLienInfoDisplayed
           ? await getMHRegistrationSummary(getMhrInformation.value.mhrNumber, false)
           : null
         if (!!regSum && !!regSum.lienRegistrationType) {
           await setLienType(regSum.lienRegistrationType)
           await scrollToFirstError(true)
+          localState.hasLienInfoDisplayed = true
           return
         }
 
@@ -1036,26 +1002,6 @@ export default defineComponent({
   scroll-margin: 40px;
 }
 
-#important-message {
-
-  &.warning {
-    background-color: $backgroundWarning !important;
-    border-color: $warning;
-  }
-
-  &.error {
-    background-color: $backgroundError !important;
-    border-color: $error;
-  }
-
-  p {
-    line-height: 22px;
-    font-size: $px-14;
-    letter-spacing: 0.01rem;
-    color: $gray7;
-  }
-}
-
 .submitting-party {
   margin-top: 55px;
 }
diff --git a/ppr-ui/tests/unit/ExemptionDetails.spec.ts b/ppr-ui/tests/unit/ExemptionDetails.spec.ts
index c019b8cec..00975e02c 100644
--- a/ppr-ui/tests/unit/ExemptionDetails.spec.ts
+++ b/ppr-ui/tests/unit/ExemptionDetails.spec.ts
@@ -1,5 +1,5 @@
 import { ExemptionDetails } from '@/views'
-import { CautionBox, DocumentId, Remarks, SimpleHelpToggle } from '@/components/common'
+import { CautionBox, DocumentId, LienAlert, Remarks, SimpleHelpToggle } from '@/components/common'
 import { HomeLocationReview, HomeOwnersReview, YourHomeReview } from '@/components/mhrRegistration/ReviewConfirm'
 
 import { createComponent, setupMockStaffUser } from './utils'
@@ -19,6 +19,7 @@ describe('ExemptionDetails', () => {
   })
 
   it('renders the basic applicable components', () => {
+    expect(wrapper.findComponent(LienAlert).exists()).toBe(false)
     expect(wrapper.findComponent(CautionBox).exists()).toBe(true)
     expect(wrapper.findComponent(SimpleHelpToggle).exists()).toBe(true)
     expect(wrapper.findComponent(DocumentId).exists()).toBe(false)
diff --git a/ppr-ui/tests/unit/ExemptionReview.spec.ts b/ppr-ui/tests/unit/ExemptionReview.spec.ts
index 462dfa5be..2bcc8b65f 100644
--- a/ppr-ui/tests/unit/ExemptionReview.spec.ts
+++ b/ppr-ui/tests/unit/ExemptionReview.spec.ts
@@ -8,6 +8,7 @@ import {
   CertifyInformation,
   FolioOrReferenceNumber,
   FormCard,
+  LienAlert,
   ReviewCard
 } from '@/components/common'
 import { PartySearch } from '@/components/parties/party'
@@ -73,6 +74,10 @@ describe('ExemptionReview', () => {
     expect(wrapper.findComponent(StaffPayment).exists()).toBe(true)
   })
 
+  it('should have no lien alert messages', async () => {
+    expect(wrapper.findComponent(LienAlert).exists()).toBe(false)
+  })
+
   it('should have no accessibility violations', async () => {
     const results = await axe(wrapper.html())
     expect(results).toHaveNoViolations()
diff --git a/ppr-ui/tests/unit/MhrInformation.spec.ts b/ppr-ui/tests/unit/MhrInformation.spec.ts
index 79feb0b25..248fb365a 100644
--- a/ppr-ui/tests/unit/MhrInformation.spec.ts
+++ b/ppr-ui/tests/unit/MhrInformation.spec.ts
@@ -15,7 +15,8 @@ import {
   CertifyInformation,
   SharedDatePicker,
   ContactInformation,
-  DocumentId
+  DocumentId,
+  LienAlert
 } from '@/components/common'
 import mockRouter from './MockRouter'
 import {
@@ -184,6 +185,7 @@ describe('Mhr Information', () => {
 
     expect(wrapper.findComponent(MhrInformation).exists()).toBe(true)
     expect(wrapper.find('#mhr-information-header').text()).toContain('Manufactured Home Information')
+    expect(wrapper.findComponent(LienAlert).exists()).toBe(false)
 
     expect(wrapper.findComponent(TransferType).exists()).toBe(false)
 
@@ -198,6 +200,7 @@ describe('Mhr Information', () => {
     wrapper.vm.dataLoaded = true
     await nextTick()
 
+    expect(wrapper.findComponent(LienAlert).exists()).toBe(false)
     // Verify it does render before changes
     expect(wrapper.findComponent(StickyContainer).exists()).toBe(false)
     expect(wrapper.findComponent(DocumentId).exists()).toBe(false)
@@ -1035,6 +1038,7 @@ describe('Mhr Information', () => {
 
     await nextTick()
     expect(wrapper.findComponent(MhrInformation).exists()).toBe(true)
+    expect(wrapper.findComponent(LienAlert).exists()).toBe(false)
 
     const CautionBoxComponent = wrapper.findComponent(CautionBox)
     expect(CautionBoxComponent.exists()).toBe(true)