From 9324802baeece1a4bbd393297befe89c75b4107e Mon Sep 17 00:00:00 2001
From: Oluwapizzy <adeyinkapaul10@gmail.com>
Date: Mon, 29 Jun 2026 17:49:19 -0400
Subject: [PATCH 1/2] Fix: Enable magnifying glass search in BusinessLookup
 component

When authenticated (IDIR/BCeID/BCSC), the BusinessLookup component is used
instead of BusinessFetch. While BusinessFetch had the magnifying glass wired
to trigger search, BusinessLookup did not. This made the icon appear
non-functional for all authenticated users in both DEV and TEST environments.

Changes:
- Wire @click:append event to call onMagnifyClick() handler
- Add async onMagnifyClick() method that performs immediate (non-debounced) search
- Validates minimum 3 characters before executing search
- Reuses existing BusinessLookupServices.search() with proper auth headers

The immediate search (no 600ms debounce) provides better UX when using the
magnifying glass, while the character validation ensures safe searches.

Works for all authentication methods (IDIR, BCeID, BCSC) via shared Keycloak
interceptors and axios auth headers.
---
 app/src/components/new-request/business-lookup.vue | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/src/components/new-request/business-lookup.vue b/app/src/components/new-request/business-lookup.vue
index b325cfca7..3b6123125 100644
--- a/app/src/components/new-request/business-lookup.vue
+++ b/app/src/components/new-request/business-lookup.vue
@@ -23,6 +23,7 @@
       :label="lookupLabel"
       @input="onItemSelected($event)"
       @keydown.enter.native.prevent
+      @click:append="onMagnifyClick"
     >
       <template #append>
         <v-progress-circular
@@ -152,6 +153,15 @@ export default class BusinessLookup extends Vue {
       state: input.status
     }
   }
+
+  /** Handle magnifying glass click - immediate search if minimum characters entered. */
+  async onMagnifyClick (): Promise<void> {
+    if (this.searchField && this.searchField.length > 2) {
+      this.state = States.SEARCHING
+      this.searchResults = await BusinessLookupServices.search(this.searchField, this.searchStatus).catch(() => [])
+      this.state = (this.searchResults.length > 0) ? States.SHOW_RESULTS : States.NO_RESULTS
+    }
+  }
 }
 </script>
 

From fc265ed72bbd2b679a0ba1ccc0c4349f7f8d4a97 Mon Sep 17 00:00:00 2001
From: Oluwapizzy <adeyinkapaul10@gmail.com>
Date: Mon, 29 Jun 2026 22:25:23 -0400
Subject: [PATCH 2/2] fix: Enable magnifying glass search in BusinessLookup for
 authenticated users

Fixed magnifying glass icon functionality when using BusinessLookup component
(used for authenticated users). The icon was previously non-functional due to
v-model binding issues and #append slot conflicts.

Changes:
- Fixed Vue 2 compatibility: Changed v-model:search-input to :search-input.sync
- Moved magnifying glass icon from append-icon prop to explicit v-icon in slot
- Added click handler with proper event binding (.stop to prevent propagation)
- Added CSS styling to make icon cursor:pointer and interactive
- Implemented dual-mode search: business numbers (BC1234567) and company names (3+ chars)
- Added input validation with user-friendly error messages
- Both debounced input (600ms) and immediate magnifying glass click work now
- Case-insensitive: Accepts lowercase, converts to uppercase for API

The magnifying glass now provides immediate search (no debounce) while the
input field uses 600ms debounce for auto-search as user types.
---
 .../new-request/business-lookup.vue           | 113 ++++++++++++++++--
 1 file changed, 101 insertions(+), 12 deletions(-)

diff --git a/app/src/components/new-request/business-lookup.vue b/app/src/components/new-request/business-lookup.vue
index 3b6123125..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"
   >
     <v-autocomplete
-      v-model:search-input="searchField"
+      :search-input.sync="searchField"
       filled
       no-filter
       :hide-no-data="state != States.NO_RESULTS"
       :items="searchResults"
       :loading="state === States.SEARCHING"
       :name="Math.random()"
-      append-icon="mdi-magnify"
+      :error-messages="errorMessages"
       autocomplete="chrome-off"
       autofocus
       hint="Search by name, incorporation or registration number of an existing business"
@@ -23,7 +23,6 @@
       :label="lookupLabel"
       @input="onItemSelected($event)"
       @keydown.enter.native.prevent
-      @click:append="onMagnifyClick"
     >
       <template #append>
         <v-progress-circular
@@ -33,6 +32,13 @@
           :size="24"
           :width="2"
         />
+        <div
+          v-else
+          class="magnify-icon-wrapper"
+          @click="onMagnifyClick"
+        >
+          <v-icon>mdi-magnify</v-icon>
+        </div>
       </template>
 
       <template #no-data>
@@ -89,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 = ''
 
@@ -102,6 +113,9 @@ export default class BusinessLookup extends Vue {
   lookupLabel = ''
   lookupNoActiveText = ''
 
+  /** Error messages for validation. */
+  errorMessages = [] as Array<string>
+
   /** Called when searchField property has changed. */
   @Watch('searchField')
   onSearchFieldChanged (): void {
@@ -124,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
     }
@@ -154,12 +191,51 @@ export default class BusinessLookup extends Vue {
     }
   }
 
-  /** Handle magnifying glass click - immediate search if minimum characters entered. */
+  /** Handle magnifying glass click - search by business number or company name. */
   async onMagnifyClick (): Promise<void> {
-    if (this.searchField && this.searchField.length > 2) {
+    // 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
-      this.searchResults = await BusinessLookupServices.search(this.searchField, this.searchStatus).catch(() => [])
+      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
     }
   }
 }
@@ -172,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;
 }