Updated QS Status Message Handling (#1492)

ppr-ui/src/components/userAccess/ReviewConfirm/Authorization.vue

@@ -10,7 +10,7 @@
           id="authorization-text-field"
           filled
           label="Legal name of authorized person (must be a lawyer or notary)"
-          v-model="authorization.legalName"
+          v-model="authorization.authorizationName"
           :rules="authorizationRules"
         />
         <v-checkbox
@@ -24,7 +24,7 @@
               class="ml-2"
               :class="{ 'error-text': validateReview && !authorization.isAuthorizationConfirmed}"
             >
-              <b class=authorization-text>{{ authorization.legalName }}</b>
+              <b class=authorization-text>{{ authorization.authorizationName }}</b>
               certifies that they have relevant knowledge of the Qualified Supplier
               and is authorized to submit this application.
             </span>

ppr-ui/src/composables/userAccess/useUserAccess.ts

@@ -7,9 +7,10 @@ import {
   getAccountInfoFromAuth,
   getFeatureFlag,
   getKeyByValue,
-  requestProductAccess
+  requestProductAccess,
+  updateUserSettings
 } from '@/utils'
-import { ProductCode, MhrSubTypes, ProductStatus, RouteNames } from '@/enums'
+import { MhrSubTypes, ProductCode, ProductStatus, RouteNames, SettingOptions } from '@/enums'
 import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/store'
 import { useAuth, useNavigation } from '@/composables'
@@ -19,6 +20,7 @@ export const useUserAccess = () => {
   const { initializeUserProducts } = useAuth()
   const { goToDash, goToRoute, containsCurrentRoute } = useNavigation()
   const {
+    setUserSettings,
     setUnsavedChanges,
     setMhrQsInformation,
     setMhrSubProduct,
@@ -29,6 +31,7 @@ export const useUserAccess = () => {
   } = useStore()
   const {
     isRoleStaffReg,
+    getUserSettings,
     getUserLastName,
     getUserFirstName,
     getMhrSubProduct,
@@ -90,10 +93,12 @@ export const useUserAccess = () => {
 
   /** Content for the QS Application Caution and Alert component **/
   const qsMsgContent: ComputedRef<UserAccessMessageIF> = computed((): UserAccessMessageIF => {
-    const productName = MhrSubTypes[getKeyByValue(ProductCode, currentSubProduct.value?.code)]
-    const helpEmail = currentSubProduct.value?.code === ProductCode.LAWYERS_NOTARIES
+    const product = currentSubProduct.value
+    const productName = MhrSubTypes[getKeyByValue(ProductCode, product?.code)]
+    const helpEmail = product?.code === ProductCode.LAWYERS_NOTARIES
       ? '[email protected]'
       : '[email protected]'
+
     const content: UserAccessMessageIF[] = [
       {
         status: ProductStatus.ACTIVE,
@@ -119,15 +124,20 @@ export const useUserAccess = () => {
       }
     ]
 
-    return content.find(content => content.status === currentSubProduct.value?.subscriptionStatus)
+    // Return if the user has previously close the status message
+    if (getUserSettings.value?.[SettingOptions.MISCELLANEOUS_PREFERENCES]?.[SettingOptions.QS_STATUS_MSG_HIDE]) {
+      return
+    }
+
+    return content.find(content => content.status === product?.subscriptionStatus)
   })
 
   /** Returns true while the Authorization Component is valid **/
   const isAuthorizationValid: ComputedRef<boolean> = computed(() => {
     return (
       getMhrQsAuthorization.value.isAuthorizationConfirmed &&
-      getMhrQsAuthorization.value.legalName.trim() !== '' &&
-      getMhrQsAuthorization.value.legalName.length <= 150
+      getMhrQsAuthorization.value.authorizationName.trim() !== '' &&
+      getMhrQsAuthorization.value.authorizationName.length <= 150
     )
   })
 
@@ -173,7 +183,7 @@ export const useUserAccess = () => {
     setMhrQsIsRequirementsConfirmed(false)
     setMhrQsAuthorization({
       isAuthorizationConfirmed: false,
-      legalName: getUserFirstName.value + ' ' + getUserLastName.value,
+      authorizationName: getUserFirstName.value + ' ' + getUserLastName.value,
       date: convertDate(new Date(), false, false)
     })
 
@@ -186,6 +196,16 @@ export const useUserAccess = () => {
     setUnsavedChanges(true)
   }
 
+  /** Close Qualified Supplier status message - update locally and user settings **/
+  const closeQsMessage = async (): Promise<void> => {
+    const updatedPreference = { [SettingOptions.QS_STATUS_MSG_HIDE]: true }
+    await updateUserSettings(SettingOptions.MISCELLANEOUS_PREFERENCES, updatedPreference)
+    await setUserSettings({
+      ...getUserSettings.value,
+      [SettingOptions.MISCELLANEOUS_PREFERENCES]: updatedPreference
+    })
+  }
+
   /**
    * Submit qualified supplier application
    * Includes a request to CREATE a Qualified Supplier in MHR
@@ -194,7 +214,7 @@ export const useUserAccess = () => {
   const submitQsApplication = async (): Promise<void> => {
     const payload: MhrQsPayloadIF = {
       ...cleanEmpty(getMhrQsInformation.value),
-      legalName: getMhrQsAuthorization.value.legalName,
+      authorizationName: getMhrQsAuthorization.value.authorizationName,
       phoneNumber: fromDisplayPhone(getMhrQsInformation.value.phoneNumber)
     }
 
@@ -208,6 +228,12 @@ export const useUserAccess = () => {
         await initializeUserProducts()
         await nextTick()
 
+        // Reset user preferences to show application messages on new submission
+        await updateUserSettings(
+          SettingOptions.MISCELLANEOUS_PREFERENCES, {
+            [SettingOptions.QS_STATUS_MSG_HIDE]: false
+          })
+
         setUnsavedChanges(false)
         await goToDash()
       }
@@ -221,6 +247,7 @@ export const useUserAccess = () => {
     initUserAccess,
     goToUserAccess,
     qsMsgContent,
+    closeQsMessage,
     isQsAccessEnabled,
     hasPendingQsAccess,
     hasRejectedQsAccess,

ppr-ui/src/enums/settingOptions.ts

@@ -1,5 +1,7 @@
 export enum SettingOptions {
   PAYMENT_CONFIRMATION_DIALOG = 'paymentConfirmationDialog',
   SELECT_CONFIRMATION_DIALOG = 'selectConfirmationDialog',
-  REGISTRATION_TABLE = 'registrationsTable'
+  REGISTRATION_TABLE = 'registrationsTable',
+  MISCELLANEOUS_PREFERENCES = 'miscellaneousPreferences',
+  QS_STATUS_MSG_HIDE = 'qsStatusMsgHide', // miscellaneousPreferences: Boolean - User has hidden the Qs status msg
 }

ppr-ui/src/interfaces/user-access-interfaces/user-access-authorization-interface.ts

@@ -1,5 +1,5 @@
 export interface UserAccessAuthorizationIF {
   isAuthorizationConfirmed: boolean
-  legalName: string
+  authorizationName: string
   date: string
 }

ppr-ui/src/store/state/state-model.ts

@@ -383,7 +383,7 @@ export const stateModel: StateModelIF = {
     isRequirementsConfirmed: false,
     authorization: {
       isAuthorizationConfirmed: false,
-      legalName: '',
+      authorizationName: '',
       date: ''
     },
     qsSubmittingParty: null

ppr-ui/src/utils/ppr-api-helper.ts

@@ -417,7 +417,7 @@ export async function getPPRUserSettings (): Promise<UserSettingsIF> {
 // Update user setting
 export async function updateUserSettings (
   setting: SettingOptions,
-  settingValue: boolean | { columns: BaseHeaderIF[], mhrColumns: BaseHeaderIF[] }
+  settingValue: boolean | { columns: BaseHeaderIF[], mhrColumns: BaseHeaderIF[] } | object
 ): Promise<UserSettingsIF> {
   const url = sessionStorage.getItem('PPR_API_URL')
   const config = { baseURL: url, headers: { Accept: 'application/json' } }

ppr-ui/src/views/Dashboard.vue

@@ -20,13 +20,15 @@
           <v-icon class="mt-n1 mr-2" :color="qsMsgContent.color">{{ qsMsgContent.icon }}</v-icon>
         </template>
 
-<!--        FUTURE SLOT: Implement Cancel Btn Functionality in Status Message Ticket  -->
-<!--        <template #appendSLot v-if="qsMsgContent.status != ProductStatus.PENDING">-->
-<!--          <v-btn class="ml-4 mt-n2 mr-n1" icon :ripple="false">-->
-<!--            <v-icon color="primary">mdi-close</v-icon>-->
-<!--          </v-btn>-->
-<!--        </template>-->
-
+        <template v-if="qsMsgContent.status != ProductStatus.PENDING" #appendSLot>
+          <v-row no-gutters>
+            <v-col>
+              <v-btn icon class="ml-4 mt-n2 mr-n1 float-right" :ripple="false" @click="closeQsMessage()">
+                <v-icon color="primary">mdi-close</v-icon>
+              </v-btn>
+            </v-col>
+          </v-row>
+        </template>
       </CautionBox>
 
       <v-row no-gutters>
@@ -159,7 +161,7 @@ export default defineComponent({
     const router = useRouter()
     const { navigateTo } = useNavigation()
     const { isAuthenticated } = useAuth()
-    const { qsMsgContent } = useUserAccess()
+    const { qsMsgContent, closeQsMessage } = useUserAccess()
     const {
       // Actions
       setSearchHistory,
@@ -314,6 +316,7 @@ export default defineComponent({
       setSearchedType,
       setSearchedValue,
       qsMsgContent,
+      closeQsMessage,
       getUserServiceFee,
       setSearchDebtorName,
       redirectRegistryHome,

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

@@ -22,7 +22,7 @@ describe('QsReviewConfirm', () => {
   const authorization = {
     isAuthorizationConfirmed: false,
     date: convertDate(new Date(), false, false),
-    legalName: 'Test User'
+    authorizationName: 'Test User'
   }
   beforeAll(async () => {
     defaultFlagSet['mhr-user-access-enabled'] = true
@@ -103,7 +103,7 @@ describe('QsReviewConfirm', () => {
     expect(heading.exists()).toBe(true)
     expect(heading.text()).toBe('Authorization')
 
-    expect(store.getMhrQsAuthorization.legalName).toBe('Test User')
+    expect(store.getMhrQsAuthorization.authorizationName).toBe('Test User')
 
     // setup
     const authorizationCheckbox = authorizationSection.find('#authorization-checkbox')
@@ -116,12 +116,12 @@ describe('QsReviewConfirm', () => {
     expect(checkboxText.exists()).toBe(true)
 
     // Checks that text is updated and reflected in text next to checkbox
-    expect(checkboxText.text().includes(store.getMhrQsAuthorization.legalName)).toBe(true)
+    expect(checkboxText.text().includes(store.getMhrQsAuthorization.authorizationName)).toBe(true)
 
     await authorizationTextField.setValue('Hello its me')
 
-    expect(store.getMhrQsAuthorization.legalName).toBe('Hello its me')
-    expect(checkboxText.text().includes(store.getMhrQsAuthorization.legalName)).toBe(true)
+    expect(store.getMhrQsAuthorization.authorizationName).toBe('Hello its me')
+    expect(checkboxText.text().includes(store.getMhrQsAuthorization.authorizationName)).toBe(true)
 
     await authorizationCheckbox.trigger('click')