17489 Partial Business Fetch component + clear button

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",

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>

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>
 

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>

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
  }

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

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

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)
-}

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))

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
-}

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,