From 2e0fc8cba45b56f14c098d6bee1599d08877df7d Mon Sep 17 00:00:00 2001
From: Severin Beauvais <severin.beauvais@gmail.com>
Date: Fri, 25 Aug 2023 12:21:02 -0700
Subject: [PATCH] - app version = 5.0.29 - implemented partial Business Fetch
 component - deleted BusinessLookup from store - used Business Fetch component
 when not logged in - implemented business lookup/fetch clear button

---
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 src/components/common/request-details.vue     |  2 +-
 src/components/dialogs/advanced-search.vue    |  2 +-
 src/components/new-request/business-fetch.vue | 84 +++++++++++++++++++
 .../new-request/business-lookup.vue           |  7 --
 src/components/new-request/search.vue         | 30 +++++--
 src/interfaces/new-request-interface.ts       |  3 +-
 src/store/actions.ts                          |  5 --
 src/store/getters.ts                          |  5 --
 src/store/mutations.ts                        |  5 --
 src/store/state.ts                            | 10 +--
 12 files changed, 112 insertions(+), 47 deletions(-)
 create mode 100644 src/components/new-request/business-fetch.vue

diff --git a/package-lock.json b/package-lock.json
index 07d51d1ed..f31c55fcf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "name-request",
-  "version": "5.0.28",
+  "version": "5.0.29",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "name-request",
-      "version": "5.0.28",
+      "version": "5.0.29",
       "dependencies": {
         "@babel/compat-data": "^7.12.13",
         "@bcrs-shared-components/breadcrumb": "2.1.24",
diff --git a/package.json b/package.json
index 9c3ef1799..f768c0186 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "name-request",
-  "version": "5.0.28",
+  "version": "5.0.29",
   "private": true,
   "appName": "Name Request UI",
   "sbcName": "SBC Common Components",
diff --git a/src/components/common/request-details.vue b/src/components/common/request-details.vue
index f60c8880e..25d899f82 100644
--- a/src/components/common/request-details.vue
+++ b/src/components/common/request-details.vue
@@ -17,7 +17,7 @@
         <h4>Applicant Information</h4>
         <ul class="pl-0">
           <!-- If there's no contact person (agent / lawyer / etc.) the applicant is the contact -->
-          <li >{{`${applicantName}`}}</li>
+          <li>{{`${applicantName}`}}</li>
           <li>
             {{`${applicant.addrLine1 ? applicant.addrLine1 : ''} ${applicant.addrLine2 ? applicant.addrLine2 : ''}`}}
           </li>
diff --git a/src/components/dialogs/advanced-search.vue b/src/components/dialogs/advanced-search.vue
index fba9c2892..ff0cd4330 100644
--- a/src/components/dialogs/advanced-search.vue
+++ b/src/components/dialogs/advanced-search.vue
@@ -2,7 +2,7 @@
   <v-dialog id="advanced-search-dialog" v-model="dialog" max-width="55rem" persistent :attach="attach">
 
     <v-card :class="{'retrieve-card-height': isTabRetrieve, 'tab-card-height': !isTabRetrieve}">
-      <v-btn icon large class="dialog-close" @click="emitClose()" >
+      <v-btn icon large class="dialog-close" @click="emitClose()">
         <v-icon>mdi-close</v-icon>
       </v-btn>
 
diff --git a/src/components/new-request/business-fetch.vue b/src/components/new-request/business-fetch.vue
new file mode 100644
index 000000000..3cc7f7911
--- /dev/null
+++ b/src/components/new-request/business-fetch.vue
@@ -0,0 +1,84 @@
+<template>
+  <!-- once in Summary state, need to re-mount to reuse this component -->
+  <div id="business-fetch" v-if="state !== States.SUMMARY">
+    <v-text-field
+      append-icon="mdi-magnify"
+      autocomplete="chrome-off"
+      autofocus
+      filled
+      @change="onItemSelected()"
+      @click:append="onItemSelected()"
+      :loading="state === States.SEARCHING"
+      :name="Math.random()"
+      hide-details="auto"
+      hint="Enter registration number of existing business"
+      label="Fetch an existing business"
+      persistent-hint
+      ref="searchField"
+      :rules="rules"
+      v-model="searchField"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Component, Emit } from 'vue-property-decorator'
+import { BusinessLookupResultIF, FormType } from '@/interfaces'
+import { Sleep } from '@/plugins'
+import { CorpTypeCd } from '@bcrs-shared-components/corp-type-module'
+import { EntityStates } from '@bcrs-shared-components/enums'
+
+enum States {
+  INITIAL = 'initial',
+  SEARCHING = 'searching',
+  SUMMARY = 'summary'
+}
+
+/*
+ * See PPR's BusinessSearchAutocomplete.vue for a Composition API example.
+ */
+@Component({})
+export default class BusinessFetch extends Vue {
+  // Refs
+  $refs!: {
+    searchField: FormType
+  }
+
+  // enum for template
+  readonly States = States
+
+  /** V-model for search field. */
+  searchField = ''
+
+  /** State of this component. */
+  state = States.INITIAL
+
+  /** Validation rules. */
+  rules = [
+    v => !!v || 'Required field',
+    v => (!v || v.length === 9) || 'Please enter a valid registration number'
+  ]
+
+  /** When an item has been selected, emits event with business object. */
+  @Emit('business')
+  async onItemSelected (): Promise<BusinessLookupResultIF> {
+    const valid = this.$refs.searchField.validate()
+    if (!valid) return
+
+    // set state and perform search
+    this.state = States.SEARCHING
+    await Sleep(1000) // *** TODO: perform search here
+
+    // set state and return result
+    this.state = States.SUMMARY
+    return {
+      identifier: this.searchField,
+      legalType: CorpTypeCd.BC_COMPANY,
+      bn: '',
+      status: EntityStates.ACTIVE,
+      name: this.searchField
+    }
+  }
+}
+</script>
diff --git a/src/components/new-request/business-lookup.vue b/src/components/new-request/business-lookup.vue
index ff10ad4e2..c68944f6a 100644
--- a/src/components/new-request/business-lookup.vue
+++ b/src/components/new-request/business-lookup.vue
@@ -47,12 +47,9 @@
 <script lang="ts">
 import Vue from 'vue'
 import { Component, Emit, Watch } from 'vue-property-decorator'
-import { Action } from 'vuex-class'
 import { debounce } from 'lodash'
-
 import { BusinessLookupResultIF } from '@/interfaces'
 import BusinessLookupServices from '@/services/business-lookup-services'
-import { ActionBindingIF } from '@/interfaces/store-interfaces'
 
 enum States {
   INITIAL = 'initial',
@@ -79,9 +76,6 @@ export default class BusinessLookup extends Vue {
   /** State of this component. */
   state = States.INITIAL
 
-  // Global actions
-  @Action setBusinessLookup!: ActionBindingIF
-
   /** Called when searchField property has changed. */
   @Watch('searchField')
   onSearchFieldChanged (): void {
@@ -109,7 +103,6 @@ export default class BusinessLookup extends Vue {
   onItemSelected (input: BusinessLookupResultIF): void {
     // safety check
     if (input) {
-      this.setBusinessLookup(input)
       // change to summary state
       this.state = States.SUMMARY
     }
diff --git a/src/components/new-request/search.vue b/src/components/new-request/search.vue
index b15569f05..6ad67b77e 100644
--- a/src/components/new-request/search.vue
+++ b/src/components/new-request/search.vue
@@ -96,10 +96,24 @@
         </v-tooltip>
       </v-col>
 
-      <!-- Business Lookup -->
+      <!-- Business Lookup/Fetch -->
       <v-col v-if="showBusinessLookup" cols="12" md="6">
-        <BusinessLookup v-if="!business" @business="business=$event"/>
-        <v-text-field v-else clearable disabled filled hide-details :value="business.name" />
+        <template v-if="!business">
+          <BusinessLookup v-if="getIsAuthenticated" @business="business=$event"/>
+          <BusinessFetch v-else @business="business=$event"/>
+        </template>
+        <div v-else class="d-flex justify-space-between align-center">
+          <v-text-field
+            append-outer-icon="mdi-close"
+            disabled
+            filled
+            hide-details
+            :value="business.name"
+          />
+          <div @click="business=null">
+            <v-icon color="primary">mdi-close</v-icon>
+          </div>
+        </div>
       </v-col>
 
       <!-- once an entity type is selected (or Federal)... -->
@@ -262,14 +276,11 @@
 import { Component, Mixins, Vue, Watch } from 'vue-property-decorator'
 import { Action, Getter } from 'vuex-class'
 
-// bcregistry common
-import { SessionStorageKeys } from 'sbc-common-components/src/util/constants'
-
-import BusinessLookup from '@/components/new-request/business-lookup.vue'
-
 // Components
 import NameInput from './name-input.vue'
 import NestedSelect from '../common/nested-select.vue'
+import BusinessLookup from '@/components/new-request/business-lookup.vue'
+import BusinessFetch from '@/components/new-request/business-fetch.vue'
 
 // Interfaces / Enums / List Data
 import { BusinessLookupResultIF, ConversionTypesI, EntityI, FormType, RequestActionsI } from '@/interfaces'
@@ -278,12 +289,13 @@ import { AccountType, CompanyType, EntityType, Location, NrRequestActionCodes, N
 import { CommonMixin, NrAffiliationMixin } from '@/mixins'
 import { CanJurisdictions, ConversionTypes, Designations, IntlJurisdictions, RequestActions } from '@/list-data'
 import { GetFeatureFlag, Navigate } from '@/plugins'
+import { SessionStorageKeys } from 'sbc-common-components/src/util/constants'
 
 /**
  * This is the component that displays the new NR menus and flows.
  */
 @Component({
-  components: { BusinessLookup, NameInput, NestedSelect }
+  components: { BusinessLookup, BusinessFetch, NameInput, NestedSelect }
 })
 export default class Search extends Mixins(CommonMixin, NrAffiliationMixin) {
   // Refs
diff --git a/src/interfaces/new-request-interface.ts b/src/interfaces/new-request-interface.ts
index d6a8ee3a9..4f646a3d4 100644
--- a/src/interfaces/new-request-interface.ts
+++ b/src/interfaces/new-request-interface.ts
@@ -2,7 +2,7 @@ import {
   AnalysisJSONI, ApplicantI, ConversionTypesI, ExistingRequestSearchI, NameRequestI,
   RequestNameI, SelectOptionsI, StatsI, SubmissionTypeT, WaitingAddressSearchI
 } from '@/interfaces/models'
-import { BusinessLookupResultIF, NameChoicesIF, NrDataIF, RequestOrConsentIF } from '@/interfaces'
+import { NameChoicesIF, NrDataIF, RequestOrConsentIF } from '@/interfaces'
 import { EntityType, Location, NrAffiliationErrors, NrRequestActionCodes } from '@/enums'
 
 interface RequestNameMapI extends RequestNameI {}
@@ -15,7 +15,6 @@ export interface NewRequestIF {
   analysisJSON: AnalysisJSONI
   applicant: ApplicantI
   assumedNameOriginal: string
-  businessLookup: BusinessLookupResultIF
   conditionsModalVisible: boolean
   conflictId: string
   conversionType: EntityType
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 6bf5a315a..c11bae37c 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -26,7 +26,6 @@ import { appBaseURL } from '../router/router'
 
 // Interfaces
 import {
-  BusinessLookupResultIF,
   CleanedNameIF,
   ConversionTypesI,
   NameRequestI,
@@ -1255,7 +1254,3 @@ export const setRefundParams: ActionIF = ({ commit }, refundParams: RefundParams
 export const setIncorporateNowErrorStatus: ActionIF = ({ commit }, incorporateNowError: boolean): void => {
   commit('mutateIncorporateNowErrorStatus', incorporateNowError)
 }
-
-export const setBusinessLookup: ActionIF = ({ commit }, businessLookupResult: BusinessLookupResultIF): void => {
-  commit('mutateBusinessLookup', businessLookupResult)
-}
diff --git a/src/store/getters.ts b/src/store/getters.ts
index 342ba1098..22cda8492 100644
--- a/src/store/getters.ts
+++ b/src/store/getters.ts
@@ -2,7 +2,6 @@ import { getVuetify } from '@/plugins'
 import {
   AnalysisJSONI,
   ApplicantI,
-  BusinessLookupResultIF,
   ConditionalInstructionI,
   ConditionalReqI,
   ConsentConflictI,
@@ -1236,10 +1235,6 @@ export const getIncorporateNowErrorStatus = (state: StateIF): boolean => {
   return state.stateModel.newRequestModel.incorporateNowError
 }
 
-export const getBusinessLookup = (state: StateIF): BusinessLookupResultIF => {
-  return state.stateModel.newRequestModel.businessLookup
-}
-
 /** True if entity type is one of the COLIN request types. */
 export const isColinRequestType = (state: StateIF): boolean => {
   return ColinRequestTypes.includes(getEntityTypeCd(state))
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index 5c3de1d15..3771eb176 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import {
   AnalysisJSONI,
-  BusinessLookupResultIF,
   ConditionalInstructionI,
   ConversionTypesI,
   NameRequestI,
@@ -568,7 +567,3 @@ export const mutateHotjarUserId = (state: StateIF, hotjarUserId: string) => {
 export const mutateIncorporateNowErrorStatus = (state: StateIF, incorporateNowError: boolean) => {
   state.stateModel.newRequestModel.incorporateNowError = incorporateNowError
 }
-
-export const mutateBusinessLookup = (state: StateIF, businessLookupResult: BusinessLookupResultIF) => {
-  state.stateModel.newRequestModel.businessLookup = businessLookupResult
-}
diff --git a/src/store/state.ts b/src/store/state.ts
index fb03a7fd3..e36bb3883 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -149,15 +149,7 @@ export const stateModel: StateModelIF = {
     userCancelledAnalysis: false,
     waitingAddressSearch: null,
     isLoadingSubmission: false,
-    hotjarUserId: '',
-    businessLookup: {
-      identifier: null,
-      legalType: null,
-      bn: null,
-      status: null,
-      name: null,
-      disabled: false
-    }
+    hotjarUserId: ''
   },
   staffPayment: {
     option: StaffPaymentOptions.NONE,