diff --git a/app/src/components/new-request/business-lookup.vue b/app/src/components/new-request/business-lookup.vue
index b325cfca7..a5cdc2957 100644
--- a/app/src/components/new-request/business-lookup.vue
+++ b/app/src/components/new-request/business-lookup.vue
@@ -5,14 +5,14 @@
id="business-lookup"
>
+
+ mdi-magnify
+
@@ -88,6 +95,11 @@ export default class BusinessLookup extends Vue {
// enum for template
readonly States = States
+ mounted (): void {
+ console.log('✨ BusinessLookup component mounted')
+ console.log('🔎 Initial state:', { state: this.state, searchField: this.searchField })
+ }
+
/** V-model for search field. */
searchField = ''
@@ -101,6 +113,9 @@ export default class BusinessLookup extends Vue {
lookupLabel = ''
lookupNoActiveText = ''
+ /** Error messages for validation. */
+ errorMessages = [] as Array
+
/** Called when searchField property has changed. */
@Watch('searchField')
onSearchFieldChanged (): void {
@@ -123,15 +138,38 @@ export default class BusinessLookup extends Vue {
}
private onSearchInputDebounced = debounce(async (that: this) => {
- // safety check
- if (that.searchField && that.searchField.length > 2) {
- that.state = States.SEARCHING
- that.searchResults = await BusinessLookupServices.search(that.searchField, that.searchStatus).catch(() => [])
+ // Support two search modes:
+ // 1. Business number (BC1234567 format) - full format required
+ // 2. Company name - minimum 3 characters
+ const validBusinessNumberPattern = /^[A-Za-z]{1,3}\d{7}$/
+ const trimmedInput = that.searchField?.trim() || ''
+ const minNameSearchLength = 3
- // display appropriate section
+ if (!trimmedInput) {
+ // Empty - reset
+ that.errorMessages = []
+ that.searchResults = []
+ that.state = States.INITIAL
+ } else if (validBusinessNumberPattern.test(trimmedInput)) {
+ // Mode 1: Valid business number format - search
+ console.log('✅ Searching by business number...')
+ that.errorMessages = []
+ that.state = States.SEARCHING
+ const upperInput = trimmedInput.toUpperCase()
+ that.searchResults = await BusinessLookupServices.search(upperInput, that.searchStatus).catch(() => [])
+ that.state = (that.searchResults.length > 0) ? States.SHOW_RESULTS : States.NO_RESULTS
+ } else if (trimmedInput.length >= minNameSearchLength) {
+ // Mode 2: Company name search (minimum 3 characters)
+ console.log('✅ Searching by company name...')
+ that.errorMessages = []
+ that.state = States.SEARCHING
+ const upperInput = trimmedInput.toUpperCase()
+ that.searchResults = await BusinessLookupServices.search(upperInput, that.searchStatus).catch(() => [])
that.state = (that.searchResults.length > 0) ? States.SHOW_RESULTS : States.NO_RESULTS
} else {
- // reset variables
+ // Invalid - too short for name search, not valid business number
+ console.log('⚠️ Invalid format for incorporation or registration number')
+ that.errorMessages = ['Invalid format for incorporation or registration number']
that.searchResults = []
that.state = States.INITIAL
}
@@ -152,6 +190,54 @@ export default class BusinessLookup extends Vue {
state: input.status
}
}
+
+ /** Handle magnifying glass click - search by business number or company name. */
+ async onMagnifyClick (): Promise {
+ // Support two search modes:
+ // 1. Business number (BC1234567 format) - full format required
+ // 2. Company name - minimum 3 characters
+ const validBusinessNumberPattern = /^[A-Za-z]{1,3}\d{7}$/
+ const trimmedInput = this.searchField?.trim() || ''
+ const minNameSearchLength = 3
+
+ console.log('🔍 Magnify click fired!', { searchField: trimmedInput })
+
+ if (!trimmedInput) {
+ console.log('⚠️ Empty search field')
+ this.errorMessages = ['Enter a search term']
+ this.searchResults = []
+ this.state = States.INITIAL
+ } else if (validBusinessNumberPattern.test(trimmedInput)) {
+ // Mode 1: Business number search
+ console.log('✅ Searching by business number...')
+ this.errorMessages = []
+ this.state = States.SEARCHING
+ const upperInput = trimmedInput.toUpperCase()
+ this.searchResults = await BusinessLookupServices.search(upperInput, this.searchStatus).catch((err) => {
+ console.error('❌ Search error:', err)
+ return []
+ })
+ console.log('📊 Results:', this.searchResults.length)
+ this.state = (this.searchResults.length > 0) ? States.SHOW_RESULTS : States.NO_RESULTS
+ } else if (trimmedInput.length >= minNameSearchLength) {
+ // Mode 2: Company name search
+ console.log('✅ Searching by company name...')
+ this.errorMessages = []
+ this.state = States.SEARCHING
+ const upperInput = trimmedInput.toUpperCase()
+ this.searchResults = await BusinessLookupServices.search(upperInput, this.searchStatus).catch((err) => {
+ console.error('❌ Search error:', err)
+ return []
+ })
+ console.log('📊 Results:', this.searchResults.length)
+ this.state = (this.searchResults.length > 0) ? States.SHOW_RESULTS : States.NO_RESULTS
+ } else {
+ console.log('⚠️ Invalid format for incorporation or registration number')
+ this.errorMessages = ['Invalid format for incorporation or registration number']
+ this.searchResults = []
+ this.state = States.INITIAL
+ }
+ }
}
@@ -162,6 +248,19 @@ export default class BusinessLookup extends Vue {
font-size: $px-12;
}
+.magnify-icon-wrapper {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 4px;
+ user-select: none;
+
+ &:hover {
+ opacity: 0.7;
+ }
+}
+
p {
color: $gray7;
}