29381 - rules and validation updates in name field (#857)

* fix: name input rules logic and add xpro validation

- add validation/disable button in sub search modal

* fix: correct defaultRules return order in name input component

* fix: update search button logic and add xpro name validation

- Update `isSearchBtnDisabled` logic for button disablement
- Add `isValidXproName` getter for XPRO name length validation

* chore: bump version to 5.8.6 and remove unused import in search component

* fix: adjust max length validation for XPRO name flow

- Use dynamic max length based on `isXproFlow` condition.

Author: hfekete

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "name-request",
-  "version": "5.8.5",
+  "version": "5.8.6",
   "private": true,
   "appName": "Name Request UI",
   "sbcName": "SBC Common Components",

app/src/components/dialogs/mras-search-info.vue

@@ -35,6 +35,7 @@
         <div class="mt-1 mb-1 text-center">
           <v-btn
             class="search-btn"
+            :disabled="isDisabled"
             @click="isNameSearch ? handleSubmit() : clearAndClose()"
           >
             {{ name ? 'Search' : 'Close' }}
@@ -50,6 +51,7 @@ import { Component, Vue } from 'vue-property-decorator'
 import { Action, Getter } from 'pinia-class'
 import { useStore } from '@/store'
 import { ActionBindingIF } from '@/interfaces/store-interfaces'
+import { MRAS_MIN_LENGTH, MRAS_MAX_LENGTH } from '@/components/new-request/constants'
 import NameInput from '@/components/new-request/name-input.vue'
 import { BAD_REQUEST, NOT_FOUND, SERVICE_UNAVAILABLE } from 'http-status-codes'
 
@@ -64,6 +66,7 @@ export default class MrasSearchInfoDialog extends Vue {
   @Getter(useStore) getMrasSearchResultCode!: number
   @Getter(useStore) getName!: string
   @Getter(useStore) getMrasSearchInfoModalVisible!: boolean
+  @Getter(useStore) isXproFlow!: boolean
 
   @Action(useStore) setMrasSearchInfoModalVisible!: ActionBindingIF
   @Action(useStore) setName!: ActionBindingIF
@@ -125,6 +128,11 @@ export default class MrasSearchInfoDialog extends Vue {
     return this.getErrors
   }
 
+  get isDisabled (): boolean {
+    return !!this.name && this.isXproFlow &&
+      (!this.name || this.name.length < MRAS_MIN_LENGTH || this.name.length > MRAS_MAX_LENGTH)
+  }
+
   async handleSubmit (): Promise<void> {
     this.showModal = false
     if (this.name) await this.startAnalyzeName(null)

app/src/components/new-request/name-input.vue

@@ -6,7 +6,7 @@
     :error-messages="message"
     autocomplete="chrome-off"
     :filled="!isReadOnly"
-    :rules="(searchValue && isMrasSearch) ? mrasRules : defaultRules"
+    :rules="getRules"
     :label="label"
     :class="{ 'read-only-mode': isReadOnly }"
     :disabled="isReadOnly"
@@ -66,6 +66,18 @@ export default class NameInput extends Vue {
     this.nameInputComponent = this.$refs['nameInputRef']
   }
 
+  get getRules (): any[] {
+    if (this.searchValue) {
+      if (this.isMrasSearch) {
+        return this.mrasRules
+      }
+      if (this.isXproFlow) {
+        return this.xproRules
+      }
+    }
+    return this.defaultRules
+  }
+
   /** The array of validation rules for the MRAS corp num. */
   get mrasRules (): any[] {
     return [
@@ -75,6 +87,13 @@ export default class NameInput extends Vue {
     ]
   }
 
+  get xproRules (): any[] {
+    return [
+      v => (!v || v.length >= MRAS_MIN_LENGTH) || `Must be at least ${MRAS_MIN_LENGTH} characters`,
+      v => (!v || v.length <= MRAS_MAX_LENGTH) || `Cannot exceed ${MRAS_MAX_LENGTH} characters`
+    ]
+  }
+
   /** Local validator when input is a MRAS corp num. */
   get isCorpNumValid (): boolean {
     if (this.isMrasSearch) return this.nameInputComponent?.valid || false
@@ -114,7 +133,12 @@ export default class NameInput extends Vue {
     }
 
     if (this.getErrors.includes('max_length')) {
-      return ['Please enter a shorter name']
+      let maxCharacters = DFLT_MAX_LENGTH
+      if (this.isXproFlow) {
+        maxCharacters = MRAS_MAX_LENGTH
+      }
+
+      return [`Cannot exceed ${maxCharacters} characters`]
     }
 
     const invalidDesignationMsg = checkInvalidDesignation(this.getEntityTypeCd, this.searchValue)

app/src/components/new-request/search.vue

@@ -365,7 +365,7 @@
             id="search-name-btn"
             class="px-9"
             :class="{ 'mobile-btn' : isMobile }"
-            :disabled="!corpNumValid"
+            :disabled="isSearchBtnDisabled"
             @click="handleSubmit(true)"
           >
             <v-icon
@@ -424,6 +424,8 @@ import { Navigate } from '@/plugins'
 import { ActionBindingIF } from '@/interfaces/store-interfaces'
 import { Action, Getter } from 'pinia-class'
 import { useStore } from '@/store'
+import { MRAS_MIN_LENGTH, MRAS_MAX_LENGTH }
+  from '@/components/new-request/constants'
 
 /**
  * This is the component that displays the new NR menus and flows.
@@ -450,6 +452,7 @@ export default class Search extends Mixins(CommonMixin, NrAffiliationMixin, Sear
   @Getter(useStore) getIsLearBusiness!: boolean
   // @Getter(useStore) isRoleStaff!: boolean
   @Getter(useStore) getAuthorizedActions!: string[]
+  @Getter(useStore) getName!: string
 
   // Constant
   readonly colinLink = sessionStorage.getItem('CORPORATE_ONLINE_URL')
@@ -756,6 +759,15 @@ export default class Search extends Mixins(CommonMixin, NrAffiliationMixin, Sear
     return false
   }
 
+  get isValidXproName (): boolean {
+    const name = this.getName
+    return name.length >= MRAS_MIN_LENGTH && name.length <= MRAS_MAX_LENGTH
+  }
+
+  get isSearchBtnDisabled (): boolean {
+    return (this.getHasNoCorpNum && !this.isValidXproName) || (!this.getHasNoCorpNum && !this.corpNumValid)
+  }
+
   /**
    * If user is authenticated, create draft business and redirect to Dashboard.
    * If restoration/reinstatement selected, go to business dashboard.