From e3e471568e0473b6e270d7b4e90e13e8f19bd134 Mon Sep 17 00:00:00 2001
From: Severin Beauvais <severin.beauvais@gmail.com>
Date: Mon, 11 Sep 2023 12:43:20 -0700
Subject: [PATCH 1/2] - app version = 5.1.0 - implemented sub-components for
 search.vue blocks - refactored search.vue to separate flows using
 sub-components (STILL WIP) - fixed tab title size on small screens - added
 search variables to store - created search-mixin.ts for common getters,
 setters, etc. - misc cleanup

---
 package-lock.json                             |   4 +-
 package.json                                  |   2 +-
 src/components/common/nested-select.vue       |  10 +-
 src/components/dialogs/mras-search-info.vue   |   5 +-
 src/components/dialogs/nr-not-required.vue    |   8 +-
 src/components/new-request/name-input.vue     |   5 +-
 .../business-lookup-fetch.vue                 | 170 ++++
 .../search-components/company-type.vue        |  45 +
 .../corp-number-checkbox.vue                  |  52 +
 .../search-components/designation.vue         |  80 ++
 .../search-components/dummy-input-box.vue     |  21 +
 .../search-components/entity-type.vue         | 157 +++
 .../search-components/jurisdiction.vue        |  67 ++
 .../numbered-company-bullets.vue              |  54 ++
 .../search-components/request-action.vue      |  85 ++
 .../xpro-federal-bullets.vue                  |  60 ++
 src/components/new-request/search.vue         | 904 +++---------------
 src/components/tabs.vue                       |   1 -
 src/interfaces/new-request-interface.ts       |  17 +-
 src/mixins/index.ts                           |   1 +
 src/mixins/search-mixin.ts                    | 199 ++++
 src/store/actions.ts                          |  18 +
 src/store/getters.ts                          |  18 +
 src/store/mutations.ts                        |  23 +-
 src/store/state.ts                            |   6 +
 src/views/landing.vue                         |  12 +
 tests/unit/name-input.spec.ts                 |   2 +-
 tests/unit/search.spec.ts                     |   2 +-
 28 files changed, 1238 insertions(+), 790 deletions(-)
 create mode 100644 src/components/new-request/search-components/business-lookup-fetch.vue
 create mode 100644 src/components/new-request/search-components/company-type.vue
 create mode 100644 src/components/new-request/search-components/corp-number-checkbox.vue
 create mode 100644 src/components/new-request/search-components/designation.vue
 create mode 100644 src/components/new-request/search-components/dummy-input-box.vue
 create mode 100644 src/components/new-request/search-components/entity-type.vue
 create mode 100644 src/components/new-request/search-components/jurisdiction.vue
 create mode 100644 src/components/new-request/search-components/numbered-company-bullets.vue
 create mode 100644 src/components/new-request/search-components/request-action.vue
 create mode 100644 src/components/new-request/search-components/xpro-federal-bullets.vue
 create mode 100644 src/mixins/search-mixin.ts

diff --git a/package-lock.json b/package-lock.json
index fc27d41db..d024e8d09 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "name-request",
-  "version": "5.0.44",
+  "version": "5.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "name-request",
-      "version": "5.0.44",
+      "version": "5.1.0",
       "dependencies": {
         "@babel/compat-data": "^7.12.13",
         "@bcrs-shared-components/breadcrumb": "2.1.24",
diff --git a/package.json b/package.json
index 62b661e0a..43e027944 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "name-request",
-  "version": "5.0.44",
+  "version": "5.1.0",
   "private": true,
   "appName": "Name Request UI",
   "sbcName": "SBC Common Components",
diff --git a/src/components/common/nested-select.vue b/src/components/common/nested-select.vue
index 38a810f43..ad9cadec5 100644
--- a/src/components/common/nested-select.vue
+++ b/src/components/common/nested-select.vue
@@ -1,6 +1,6 @@
 <template>
   <v-select
-    class="request-action-select"
+    class="nested-select"
     filled
     hide-details="auto"
     item-value="[group,value]"
@@ -69,7 +69,7 @@ export default class NestedSelect extends Vue {
   @Prop({ default: null }) readonly value!: any
   @Prop() readonly maxHeight!: string
 
-  // data
+  // variables
   activeActionGroup = NaN
 
   // computed
@@ -93,13 +93,13 @@ export default class NestedSelect extends Vue {
   }
 
   // methods
-  @Emit('change')
-  emitChangeEvent (item: any): void {}
-
   toggleActionGroup (group: number): void {
     // if current group is active, deactivate it, otherwise activate it
     this.activeActionGroup = (this.activeActionGroup === group) ? NaN : group
   }
+
+  @Emit('change')
+  emitChangeEvent (item: any): void {}
 }
 </script>
 
diff --git a/src/components/dialogs/mras-search-info.vue b/src/components/dialogs/mras-search-info.vue
index 6df8ae695..09f0ef583 100644
--- a/src/components/dialogs/mras-search-info.vue
+++ b/src/components/dialogs/mras-search-info.vue
@@ -16,10 +16,7 @@
         <p>{{ resultDesc  }}</p>
         <p>{{ resultAct }}</p>
 
-        <NameInput
-          id="name-input-component"
-          :is-mras-search="!isNameSearch"
-        />
+        <NameInput :is-mras-search="!isNameSearch" />
       </v-card-text>
 
       <v-card-actions class="justify-center">
diff --git a/src/components/dialogs/nr-not-required.vue b/src/components/dialogs/nr-not-required.vue
index 94bdc6047..fccceb5aa 100644
--- a/src/components/dialogs/nr-not-required.vue
+++ b/src/components/dialogs/nr-not-required.vue
@@ -9,14 +9,14 @@
         <ol>
           <li>
             <b>You are already Federally Incorporated.</b><br>
-            You do not require a name request. Please go to <a :href="corpOnlineLink" target="_blank">
+            You do not require a name request. Please go to <a :href="colinLink" target="_blank">
             Corporate Online</a> to extra-provincially register your business.
           </li>
           <li class="my-3">
             <b>You want a numbered company. The business does not need a name.</b><br>
             You do not require a name request. If you are incorporating a Benefit company go to
             <a :href="businessRegistryLink" target="_blank">BC Business Registry</a>, otherwise go to
-            <a :href="corpOnlineLink" target="_blank">Corporate Online</a>. A number will be assigned
+            <a :href="colinLink" target="_blank">Corporate Online</a>. A number will be assigned
             upon registering your business.
           </li>
           <li>
@@ -44,8 +44,8 @@ export default class NrNotRequiredDialog extends Vue {
   @Getter getNrRequiredModalVisible!: boolean
   @Action setNrRequiredModalVisible!: ActionBindingIF
 
-  private corpOnlineLink = 'https://www.corporateonline.gov.bc.ca/'
-  private businessRegistryLink = 'https://www.bcregistry.ca/business'
+  readonly colinLink = sessionStorage.getItem('CORPORATE_ONLINE_URL')
+  readonly businessRegistryLink = 'https://www.bcregistry.ca/business'
 
   get showModal () {
     return this.getNrRequiredModalVisible
diff --git a/src/components/new-request/name-input.vue b/src/components/new-request/name-input.vue
index e998c2513..6d20f824e 100644
--- a/src/components/new-request/name-input.vue
+++ b/src/components/new-request/name-input.vue
@@ -1,6 +1,6 @@
 <template>
   <v-text-field
-    id="name-input-text-field"
+    id="name-input-component"
     ref="nameInputRef"
     :error-messages="message"
     autocomplete="chrome-off"
@@ -22,7 +22,6 @@
 <script lang="ts">
 import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'
 import { Getter, Action } from 'vuex-class'
-import { Location, NrRequestActionCodes } from '@/enums'
 import { ActionBindingIF } from '@/interfaces/store-interfaces'
 import { sanitizeName } from '@/plugins'
 import { MRAS_MAX_LENGTH } from '@/components/new-request/constants'
@@ -42,9 +41,7 @@ export default class NameInput extends Vue {
   @Getter getCorpSearch!: string
   @Getter getErrors!: string[]
   @Getter getHasNoCorpNum!: boolean
-  @Getter getLocation!: Location
   @Getter getName!: string
-  @Getter getRequestActionCd!: NrRequestActionCodes
   @Getter isMrasJurisdiction!: boolean
   @Getter isXproFlow!: boolean
 
diff --git a/src/components/new-request/search-components/business-lookup-fetch.vue b/src/components/new-request/search-components/business-lookup-fetch.vue
new file mode 100644
index 000000000..1bc6cee4f
--- /dev/null
+++ b/src/components/new-request/search-components/business-lookup-fetch.vue
@@ -0,0 +1,170 @@
+<template>
+  <v-col id="business-lookup-fetch" :cols="cols" :md="md">
+    <template v-if="!getSearchBusiness">
+      <BusinessLookup
+        v-if="isAuthenticated"
+        :searchStatus="lookupActiveOrHistorical"
+        @business="onBusiness($event)"
+      />
+      <BusinessFetch
+        v-else
+        @business="onBusiness($event)"
+      />
+    </template>
+    <v-form v-else ref="businessLookupTextFieldForm">
+      <v-text-field
+        append-icon="mdi-close"
+        readonly
+        filled
+        :label="label"
+        :value="getSearchBusiness.legalName"
+        :rules="rules"
+        :hint="hint"
+        @click:append="onBusiness(null)"
+        @keyup.delete="onBusiness(null)"
+      />
+    </v-form>
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop, Vue, Watch } from 'vue-property-decorator'
+import BusinessFetch from '@/components/new-request/business-fetch.vue'
+import BusinessLookup from '@/components/new-request/business-lookup.vue'
+import { BusinessSearchIF, FormType } from '@/interfaces'
+import { CorpTypeCd, EntityStates, EntityTypes, Location, NrRequestTypeCodes } from '@/enums'
+import { CommonMixin, SearchMixin } from '@/mixins'
+
+@Component({
+  components: { BusinessFetch, BusinessLookup }
+})
+export default class BusinessLookupFetch extends Mixins(CommonMixin, SearchMixin) {
+  @Prop({ default: '12' }) readonly cols!: string
+  @Prop({ default: '6' }) readonly md!: string
+
+  // Refs
+  $refs!: {
+    businessLookupTextFieldForm: FormType
+    selectBusinessTypeRef: FormType
+  }
+
+  get rules (): any {
+    return [
+      () => {
+        if (this.isConversion) {
+          return this.isAlterable || 'This business cannot alter their business type'
+        } else if (this.isRestoration) {
+          return this.isRestorable || 'This business cannot be restored.'
+        }
+        return true
+      }]
+  }
+
+  get label (): string {
+    if (this.isAuthenticated) {
+      if (this.lookupActiveOrHistorical === EntityStates.HISTORICAL) {
+        return 'Find a historical business'
+      } else {
+        return 'Find an existing business'
+      }
+    } else {
+      if (this.lookupActiveOrHistorical === EntityStates.HISTORICAL) {
+        return 'Fetch a historical business'
+      } else {
+        return 'Fetch an existing business'
+      }
+    }
+  }
+
+  get hint (): string {
+    if (this.isAuthenticated) {
+      return 'Search by name, incorporation or registration number of existing business'
+    } else {
+      return 'Enter registration number of existing business'
+    }
+  }
+
+  /** Search businesses with business lookup depending on the Action selected. */
+  get lookupActiveOrHistorical (): String {
+    return this.isRestoration ? EntityStates.HISTORICAL : EntityStates.ACTIVE
+  }
+
+  /** Event handled for business lookup/fetch. */
+  async onBusiness (business: BusinessSearchIF): Promise<void> {
+    this.setSearchBusiness(business)
+    this.entity_type_cd = this.getSearchBusiness?.legalType || null
+    this.setCorpNum(business?.identifier || null)
+    this.setEntityTypeCd(this.getSearchBusiness?.legalType)
+    this.setName('')
+
+    // Waiting for DOM update to be able to access the Ref. Trigger form validation.
+    // Need to do that because the ref is in a conditional.
+    await Vue.nextTick()
+    if (this.getSearchBusiness) this.$refs.businessLookupTextFieldForm.validate()
+
+    if (this.isConversion) {
+      if (this.getSearchBusiness) {
+        // set the from business for alteration (conversion)
+        this.setOriginEntityTypeCd(this.getSearchBusiness.legalType)
+        // special case if the from business is BEN
+        // set conversionType & entity_type_cd because there's only one alteration type for it
+        if (this.isBenBusiness) {
+          this.setConversionType(NrRequestTypeCodes.CONVERT_CORP)
+          this.setEntityTypeCd(EntityTypes.BC)
+        }
+      } else {
+        // clear all related fields when clearing business search/fetch for alter
+        this.setConversionType(null)
+        this.setOriginEntityTypeCd(null)
+        this.setSearchCompanyType(null)
+      }
+    }
+
+    if (this.isRestoration) {
+      // Check if not XPRO and BC restorable
+      if (!this.isSelectedXproAndRestorable && this.isBcRestorable) {
+        this.setLocation(Location.BC)
+        const corpType = this.getSearchBusiness.legalType as unknown as CorpTypeCd
+        this.setEntityTypeCd(this.corpTypeToEntityType(corpType))
+      } else if (this.isSelectedXproAndRestorable) { // Check if XPRO and restorable
+        this.setLocation(Location.CA)
+        this.setEntityTypeCd(this.getSearchBusiness.legalType)
+      } else {
+        this.setEntityTypeCd(null)
+      }
+    }
+
+    if (this.isChangeName) {
+      if (this.isBcBenCccUlc) {
+        this.setLocation(Location.BC)
+        const corpType = this.getSearchBusiness?.legalType as unknown as CorpTypeCd
+        this.setEntityTypeCd(this.corpTypeToEntityType(corpType))
+      } else {
+        this.setEntityTypeCd(this.getSearchBusiness.legalType)
+      }
+
+      if (this.isChangeNameXpro) {
+        this.setLocation(Location.CA)
+        this.setEntityTypeCd(this.getSearchBusiness.legalType)
+      }
+    }
+  }
+
+  /** Resets fields when returned to the Tabs component */
+  @Watch('getDisplayedComponent')
+  watchDisplayedComponent (displayedComponent: string) {
+    if (displayedComponent === 'Tabs') {
+      this.onBusiness(null)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+// make the business lookup close button always blue
+::v-deep #business-lookup button.mdi-close {
+  color: $app-blue;
+}
+</style>
diff --git a/src/components/new-request/search-components/company-type.vue b/src/components/new-request/search-components/company-type.vue
new file mode 100644
index 000000000..130f07ede
--- /dev/null
+++ b/src/components/new-request/search-components/company-type.vue
@@ -0,0 +1,45 @@
+<template>
+  <v-col id="company-type" :cols="cols" :md="md">
+    <header class="h6">Select a company type:</header>
+
+    <v-radio-group
+      class="mt-0 pt-6"
+      hide-details
+      mandatory
+      row
+      :value="getSearchCompanyType"
+      @change="setSearchCompanyType($event)"
+    >
+      <v-radio
+        id="named-company-radio"
+        label="Named Company"
+        :value="CompanyTypes.NAMED_COMPANY"
+      />
+      <v-radio
+        id="numbered-company-radio"
+        label="Numbered Company"
+        :value="CompanyTypes.NUMBERED_COMPANY"
+      />
+    </v-radio-group>
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import { SearchMixin } from '@/mixins'
+
+@Component({})
+export default class CompanyType extends Mixins(SearchMixin) {
+  @Prop({ default: '12' }) readonly cols!: string
+  @Prop({ default: '6' }) readonly md!: string
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+  // override radio group background color
+  .v-input--radio-group .v-input__control .v-input__slot {
+    background-color: white !important;
+  }
+}
+</style>
diff --git a/src/components/new-request/search-components/corp-number-checkbox.vue b/src/components/new-request/search-components/corp-number-checkbox.vue
new file mode 100644
index 000000000..82e7a6809
--- /dev/null
+++ b/src/components/new-request/search-components/corp-number-checkbox.vue
@@ -0,0 +1,52 @@
+<template>
+  <div id="corp-number-checkbox">
+    <v-tooltip
+      top min-width="390"
+      content-class="top-tooltip"
+      transition="fade-transition"
+      :disabled="isMobile"
+    >
+      <template v-slot:activator="{ on }">
+        <v-checkbox
+          v-model="noCorpNum"
+          id="corp-num-checkbox"
+          class="copy-small mt-0 pt-0"
+          hide-details
+          v-slot:label
+          v-on="on"
+        >
+          <span v-on="on" class="copy-small">I don't have a corporate number</span>
+        </v-checkbox>
+      </template>
+
+      <p>
+        If you don't have or don't know the corporation number of the business, enter the full legal name
+        of the business in its home jurisdiction.
+      </p>
+
+      <p>
+        Note: If the home jurisdiction requires a name reservation, you may want to complete a name search
+        in the home jurisdiction first to ensure that the name is available and then return to BC.
+      </p>
+    </v-tooltip>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import NestedSelect from '@/components/common/nested-select.vue'
+import { SearchMixin } from '@/mixins'
+
+@Component({
+  components: { NestedSelect }
+})
+export default class CorpNumberCheckbox extends Mixins(SearchMixin) {
+  get noCorpNum (): boolean {
+    return this.getHasNoCorpNum
+  }
+
+  set noCorpNum (value: boolean) {
+    this.setNoCorpNum(value)
+  }
+}
+</script>
diff --git a/src/components/new-request/search-components/designation.vue b/src/components/new-request/search-components/designation.vue
new file mode 100644
index 000000000..a07a09cfa
--- /dev/null
+++ b/src/components/new-request/search-components/designation.vue
@@ -0,0 +1,80 @@
+<template>
+  <v-col id="designation" :cols="cols" :md="md">
+    <v-select
+      filled
+      hide-details="auto"
+      label="Select a Designation"
+      :error-messages="getErrors.includes('designation') ? 'Please enter a designation' : ''"
+      :items="designationOptions"
+      :menu-props="{ bottom: true, offsetY: true}"
+      :readonly="!entity_type_cd"
+      :value="getDesignation"
+      @input="setDesignation($event)"
+      @change="setClearErrors()"
+    />
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import { CommonMixin, SearchMixin } from '@/mixins'
+import { Designations } from '@/list-data'
+import { EntityTypes } from '@/enums'
+
+@Component({})
+export default class Designation extends Mixins(CommonMixin, SearchMixin) {
+  @Prop() readonly cols!: string
+  @Prop() readonly md!: string
+
+  get designationOptions (): Array<string> {
+    let output = Designations[this.getEntityTypeCd]?.words as string[]
+    if (this.getEntityTypeCd === EntityTypes.CC) {
+      output = Designations[EntityTypes.CR].words
+    }
+    return output
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+.v-list {
+  padding: 0;
+}
+
+.list-item {
+  width: 100%;
+  padding: 8px;
+}
+
+.last-select-item {
+  border-top: 1px solid $gray3;
+  padding: 20px 8px !important;
+}
+
+// set content colour when hovering over list items
+.v-list-item:hover .v-list-item__content,
+.list-item:hover {
+  color: $app-blue !important;
+}
+
+// Vuetify overrides
+::v-deep {
+  .v-select:not(.v-select--is-multi).v-text-field--single-line .v-select__selections{
+    line-height: 2;
+  }
+
+  .v-select__selections {
+    line-height: 20px !important;
+  }
+
+  .v-select__selection--disabled {
+    color: $gray9 !important;
+  }
+
+  .theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
+    color: $gray7 !important;
+  }
+}
+</style>
diff --git a/src/components/new-request/search-components/dummy-input-box.vue b/src/components/new-request/search-components/dummy-input-box.vue
new file mode 100644
index 000000000..5c252626f
--- /dev/null
+++ b/src/components/new-request/search-components/dummy-input-box.vue
@@ -0,0 +1,21 @@
+<template>
+  <v-col id="dummy-input-box" :cols="cols" :md="md">
+    <v-text-field
+      filled
+      disabled
+      hide-details
+      :label=label
+    />
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class DummyInputBox extends Vue {
+  @Prop({ default: '12' }) readonly cols!: string
+  @Prop({ default: '6' }) readonly md!: string
+  @Prop({ default: 'Select an action first' }) readonly label!: string
+}
+</script>
diff --git a/src/components/new-request/search-components/entity-type.vue b/src/components/new-request/search-components/entity-type.vue
new file mode 100644
index 000000000..04d541350
--- /dev/null
+++ b/src/components/new-request/search-components/entity-type.vue
@@ -0,0 +1,157 @@
+<template>
+  <v-col id="entity-type" :cols="cols" :md="md">
+    <v-text-field
+      v-if="isConversion && isBenBusiness"
+      filled
+      disabled
+      hide-details
+      label="Benefit Company to Limited Company"
+    />
+
+    <v-tooltip
+      v-else
+      top
+      content-class="top-tooltip"
+      :disabled="!isConversion || !entityConversionText || isMobile"
+      transition="fade-transition"
+    >
+      <template v-slot:activator="scope">
+        <div v-on="scope.on">
+          <v-select
+            id="entity-type-options-select"
+            :label="isConversion ? 'Select type of business to alter into' : 'Select type of business in B.C.'"
+            :error-messages="getErrors.includes('entity_type_cd') ? 'Please select a business type' : ''"
+            :items="entityTypeOptions"
+            :menu-props="{ bottom: true, offsetY: true}"
+            ref="selectBusinessTypeRef"
+            hide-details="auto"
+            filled
+            :value="isConversion ? getOriginEntityTypeCd : entity_type_cd"
+            @change="setClearErrors(); entity_type_cd = $event"
+          >
+            <template v-slot:item="{ item }">
+              <v-tooltip
+                :right="isScreenLg"
+                :left="!isScreenLg"
+                :disabled="!item.blurbs || isMobile"
+                :content-class="!isScreenLg ? 'left-tooltip' : ''"
+                transition="fade-transition"
+              >
+                <template v-slot:activator="scope">
+                  <span
+                    v-on="scope.on"
+                    class="list-item"
+                    :class="{ 'last-select-item': item.value === 'INFO' }"
+                  >{{ item.text }}</span>
+                </template>
+
+                <div v-for="(blurb, index) in entityBlurbs(item.value)" :key="`blurb-${index}`">
+                  <span :class="{ 'tooltip-bullet': index !== 0}">
+                    {{ blurb }}
+                  </span>
+                </div>
+              </v-tooltip>
+            </template>
+          </v-select>
+        </div>
+      </template>
+
+      <span>{{ entityConversionText }}</span>
+    </v-tooltip>
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop, Watch } from 'vue-property-decorator'
+import { FormType } from '@/interfaces'
+import { EntityTypes } from '@/enums'
+import { ConversionTypes } from '@/list-data'
+import { SearchMixin } from '@/mixins'
+
+@Component({})
+export default class EntityType extends Mixins(SearchMixin) {
+  @Prop({ default: '12' }) readonly cols!: string
+  @Prop({ default: '6' }) readonly md!: string
+
+  // Refs
+  $refs!: {
+    selectBusinessTypeRef: FormType
+  }
+
+  // FUTURE: clean up return type
+  entityBlurbs (entity_type_cd: string): string | string[] | string[][] {
+    return this.getEntityBlurbs.find(type => type.value === entity_type_cd)?.blurbs
+  }
+
+  get entityTypeOptions () {
+    return (this.isConversion ? this.getConversionTypeOptions : this.getEntityTypeOptions)
+  }
+
+  get entityConversionText () {
+    // convert NrRequestTypeCodes -> EntityTypes
+    return ConversionTypes.find(conversion => conversion.value === this.getConversionType)?.text
+  }
+
+  // FUTURE: move this into setter?
+  @Watch('entity_type_cd')
+  private clearDesignation () {
+    this.setDesignation('')
+    // clear "Select a Business Type" field when "View all business types" or Society is selected
+    if (!this.entity_type_cd || this.entity_type_cd === EntityTypes.INFO) {
+      this.$refs.selectBusinessTypeRef && this.$refs.selectBusinessTypeRef.reset()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+.v-list {
+  padding: 0;
+}
+
+.list-item {
+  width: 100%;
+  padding: 8px;
+}
+
+.last-select-item {
+  border-top: 1px solid $gray3;
+  padding: 20px 8px !important;
+}
+
+// set content colour when hovering over list items
+.v-list-item:hover .v-list-item__content,
+.list-item:hover {
+  color: $app-blue !important;
+}
+
+// Vuetify overrides
+::v-deep {
+  .v-select:not(.v-select--is-multi).v-text-field--single-line .v-select__selections{
+    line-height: 2;
+  }
+
+  .v-select__selections {
+    line-height: 20px !important;
+  }
+
+  .v-input--is-disabled .v-input__icon {
+    display: none !important;
+  }
+
+  .v-select__selection--disabled {
+    color: $gray9 !important;
+  }
+
+  // reduce checkbox height when there are no error messages
+  .v-messages:not(.error--text) {
+    margin-bottom: -22px;
+  }
+
+  .theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
+    color: $gray7 !important;
+  }
+}
+</style>
diff --git a/src/components/new-request/search-components/jurisdiction.vue b/src/components/new-request/search-components/jurisdiction.vue
new file mode 100644
index 000000000..48fdcce53
--- /dev/null
+++ b/src/components/new-request/search-components/jurisdiction.vue
@@ -0,0 +1,67 @@
+<template>
+  <v-col id="jurisdiction" :cols="cols" :md="md">
+    <NestedSelect
+      label="Select your home jurisdiction"
+      :menuItems="jurisdictionOptions"
+      :error-messages="getErrors.includes('jurisdiction') ? 'Please select a jurisdiction' : ''"
+      :value="getSearchJurisdiction"
+      @change="setClearErrors(); onJurisdictionChange($event)"
+    />
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import NestedSelect from '@/components/common/nested-select.vue'
+import { Location } from '@/enums'
+import { SearchMixin } from '@/mixins'
+import { CanJurisdictions, IntlJurisdictions } from '@/list-data'
+
+@Component({
+  components: { NestedSelect }
+})
+export default class Jurisdiction extends Mixins(SearchMixin) {
+  @Prop({ default: '12' }) readonly cols!: string
+  @Prop({ default: '6' }) readonly md!: string
+
+  get jurisdictionOptions (): Array<any> {
+    const array = [] as Array<any>
+
+    // add in Canadian jurisdictions (not including BC)
+    array.push({ isHeader: true, group: 0, text: 'Canadian' })
+    CanJurisdictions
+      .filter(jur => jur.value !== Location.BC)
+      .forEach(jur => array.push({
+        group: 0,
+        text: jur.text,
+        value: jur.value,
+        separator: (jur.value === Location.FD)
+      }))
+
+    // add in International jurisdictions (not including CA)
+    array.push({ isHeader: true, group: 1, text: 'International' })
+    IntlJurisdictions
+      .filter(jur => jur.value !== Location.CA)
+      .forEach(jur => array.push({
+        group: 1,
+        text: jur.text,
+        value: jur.value,
+        separator: false
+      }))
+
+    return array
+  }
+
+  /** Called when Jurisdiction menu item is changed. */
+  onJurisdictionChange (jurisdiction: any): void {
+    this.setSearchJurisdiction(jurisdiction)
+
+    this.setLocation(jurisdiction.group === 0 ? Location.CA : Location.IN)
+    this.setJurisdictionCd(jurisdiction.value)
+    // Resetting the entity type when a business is selected (after jurisdiction change)
+    if (this.getSearchBusiness) {
+      this.setEntityTypeCd(this.getSearchBusiness.legalType)
+    }
+  }
+}
+</script>
diff --git a/src/components/new-request/search-components/numbered-company-bullets.vue b/src/components/new-request/search-components/numbered-company-bullets.vue
new file mode 100644
index 000000000..d1580acd8
--- /dev/null
+++ b/src/components/new-request/search-components/numbered-company-bullets.vue
@@ -0,0 +1,54 @@
+<template>
+  <v-col id="numbered-company-bullets" :cols="cols" :md="md">
+    <template v-if="isConversion && !isAlterOnline(getConversionType)">
+      <div class="contact-registries">
+        <p>To complete this alteration, please contact us at:</p>
+        <p>
+          <v-icon small>mdi-phone</v-icon>&nbsp;Canada and U.S. Toll Free:
+          <a href="tel:+1877-370-1033">1-877-370-1033</a>
+        </p>
+        <p><v-icon small>mdi-phone</v-icon>&nbsp;Victoria Office:
+          <a href="tel:250-370-1033">250-370-1033</a>
+        </p>
+        <p><v-icon small>mdi-email</v-icon>&nbsp;Email:
+          <a href="mailto:BCRegistries@gov.bc.ca">BCRegistries@gov.bc.ca</a>
+        </p>
+      </div>
+    </template>
+
+    <template v-else-if="!isXproFlow">
+      <ul class="bullet-points">
+        <li>Your business name will be the Incorporation Number assigned by the Registry.</li>
+        <li>You can change your business name at a later date.</li>
+        <li>It is not possible to request a specific Incorporation Number.</li>
+      </ul>
+    </template>
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import { SearchMixin } from '@/mixins'
+
+@Component({})
+export default class NumberedCompanyBullets extends Mixins(SearchMixin) {
+  @Prop({ default: '12' }) readonly cols!: string
+  @Prop({ default: null }) readonly md!: string
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+// icon colour
+.v-icon.mdi-phone,
+.v-icon.mdi-email {
+  color: $app-dk-blue;
+}
+
+// line spacing between bullet points and sizing
+.bullet-points {
+  line-height: 1.5rem;
+  font-size: $px-15;
+}
+</style>
diff --git a/src/components/new-request/search-components/request-action.vue b/src/components/new-request/search-components/request-action.vue
new file mode 100644
index 000000000..63f90afd0
--- /dev/null
+++ b/src/components/new-request/search-components/request-action.vue
@@ -0,0 +1,85 @@
+<template>
+  <v-col id="request-action" :cols="cols" :md="md">
+    <v-tooltip
+      top
+      content-class="top-tooltip"
+      transition="fade-transition"
+      :disabled="!showRequestActionTooltip || isMobile"
+    >
+      <template v-slot:activator="scope">
+        <div v-on="scope.on">
+          <NestedSelect
+            id="request-action-select"
+            label="Action"
+            :menuItems="RequestActions"
+            :errorMessages="getErrors.includes('request_action_cd') ? 'Please select an action' : ''"
+            :value="getSearchRequest"
+            maxHeight="333"
+            @change="setClearErrors(); onRequestActionChange($event)"
+          />
+        </div>
+      </template>
+
+      <span v-if="getSearchRequest">{{ getSearchRequest.text }}</span>
+    </v-tooltip>
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop, Vue } from 'vue-property-decorator'
+import NestedSelect from '@/components/common/nested-select.vue'
+import { SearchMixin } from '@/mixins'
+import { RequestActionsI } from '@/interfaces'
+import { Location } from '@/enums'
+
+@Component({
+  components: { NestedSelect }
+})
+export default class RequestAction extends Mixins(SearchMixin) {
+  @Prop({ default: '12' }) readonly cols!: string
+  @Prop({ default: '6' }) readonly md!: string
+
+  /** Whether to show the Request Action tooltip. */
+  showRequestActionTooltip = false
+
+  /** Called when Request Action menu item is changed. */
+  async onRequestActionChange (request: RequestActionsI): Promise<void> {
+    this.setSearchRequest(request)
+
+    this.setRequestAction(this.getSearchRequest?.value || null)
+
+    // clear previous state
+    this.setSearchBusiness(null)
+    this.setSearchJurisdiction(null)
+    this.setLocation(null)
+    this.setJurisdictionCd(null)
+    if (this.entity_type_cd) this.entity_type_cd = null
+    this.setSearchCompanyType(null)
+    this.setCorpNum(null)
+    this.setName('')
+
+    // wait for updates
+    await Vue.nextTick()
+
+    if (this.isNewBusiness) {
+      this.setExtendedRequestType(this.getSearchRequest)
+    }
+
+    // set default location for requests where there is only one location option
+    if (this.isNewBcBusiness || this.isContinuationIn || this.isConversion || this.isAmalgamation) {
+      // *** TODO: set location for amalgamation later (depending on entity type selected)
+      this.setLocation(Location.BC)
+    } else if (this.isAssumed && this.getLocation === Location.BC) {
+      this.setLocation(Location.CA)
+    }
+
+    // calculate whether to show tooltip
+    // (after waiting for DOM update)
+    await Vue.nextTick()
+    const el = document.querySelector('#request-action-select .v-select__selection') as any
+    const offsetWidth = el?.offsetWidth as number
+    const scrollWidth = el?.scrollWidth as number
+    this.showRequestActionTooltip = (offsetWidth < scrollWidth)
+  }
+}
+</script>
diff --git a/src/components/new-request/search-components/xpro-federal-bullets.vue b/src/components/new-request/search-components/xpro-federal-bullets.vue
new file mode 100644
index 000000000..3c12c0354
--- /dev/null
+++ b/src/components/new-request/search-components/xpro-federal-bullets.vue
@@ -0,0 +1,60 @@
+<template>
+  <v-col id="xpro-federal-bullets" :cols="cols" :md="md">
+    <ul class="bullet-points">
+      <li>Federally incorporated businesses do not need a Name Request.</li>
+
+      <li v-if="isAmalgamation">
+        To register your extraprovincial amalgamation, download and complete
+        <a :href="federalAmalgamationFormLink">
+          this form <v-icon small class="ml-1" color="primary">mdi-open-in-new</v-icon>
+        </a>.
+      </li>
+
+      <li v-else-if="isRestoration && isSelectedXproAndRestorable">
+        To reinstate your business, complete
+        <a :href="fullReinstatementFormLink">
+          this form <v-icon small class="ml-1" color="primary">mdi-open-in-new</v-icon>
+        </a> for a full reinstatement or
+        <a :href="limitedReinstatementFormLink">
+          this form  <v-icon small class="ml-1" color="primary">mdi-open-in-new</v-icon>
+        </a> for a limited reinstatement.
+      </li>
+
+      <li v-else>
+        You may register your extraprovincial business immediately using its existing name
+        at Corporate Online.
+      </li>
+    </ul>
+  </v-col>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import { SearchMixin } from '@/mixins'
+
+@Component({})
+export default class XproFederalBullets extends Mixins(SearchMixin) {
+  @Prop({ default: '12' }) readonly cols!: string
+  @Prop({ default: null }) readonly md!: string
+
+  readonly federalAmalgamationFormLink = 'https://www2.gov.bc.ca/assets/gov/employment-business-and-economic-' +
+    'development/business-management/permits-licences-and-registration/registries-packages/' +
+    'pack_34_xco_-_amalgamation_application_and_business_number_request.pdf'
+  readonly fullReinstatementFormLink = 'https://www2.gov.bc.ca/assets/gov/employment-business-and-economic-' +
+    'development/business-management/permits-licences-and-registration/registries-forms/' +
+    'form_31_xco_-_full_reinstatement_application.pdf'
+  readonly limitedReinstatementFormLink = 'https://www2.gov.bc.ca/assets/gov/employment-business-and-economic-' +
+    'development/business-management/permits-licences-and-registration/registries-forms/' +
+    'form_29_xco_-_limited_reinstatement_application.pdf'
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+// l between bullet points and sizing
+.bullet-points {
+  line-height: 1.5rem;
+  font-size: $px-15;
+}
+</style>
diff --git a/src/components/new-request/search.vue b/src/components/new-request/search.vue
index 54ad5b854..7f4dc58e6 100644
--- a/src/components/new-request/search.vue
+++ b/src/components/new-request/search.vue
@@ -2,306 +2,133 @@
   <v-container fluid id="search-container" class="copy-normal pt-10 px-10"
     :class="(isFederal && isRestoration) ? 'pb-0' : 'pb-12'"
   >
-    <v-row>
-      <v-col cols="12" class="font-weight-bold h6">
-        Get started by selecting an action:
-      </v-col>
+    <header class="h6">Get started by selecting an action:</header>
 
+    <v-row class="pt-6">
       <!-- Request Action -->
-      <v-col cols="12" md="6">
-        <v-tooltip
-          top
-          content-class="top-tooltip"
-          transition="fade-transition"
-          :disabled="!showRequestActionTooltip || isMobile"
-        >
-          <template v-slot:activator="scope">
-            <div v-on="scope.on">
-              <NestedSelect
-                label="Action"
-                :menuItems="RequestActions"
-                :errorMessages="getErrors.includes('request_action_cd') ? 'Please select an action' : ''"
-                :value="request"
-                maxHeight="333"
-                @change="setClearErrors(); onRequestActionChange($event)"
-              />
-            </div>
-          </template>
-          <span>{{ request && request.text }}</span>
-        </v-tooltip>
-      </v-col>
+      <RequestAction />
 
       <!-- display a dummy input box when Request Action is not yet selected -->
-      <v-col v-if="!request" cols="12" md="6">
-        <v-text-field filled disabled hide-details label="Select an action first" />
-      </v-col>
-
-      <!-- Business Lookup/Fetch -->
-      <v-col v-if="showBusinessLookup" cols="12" md="6" class="business-lookup">
-        <template v-if="!business">
-          <BusinessLookup
-            v-if="isAuthenticated"
-            :searchStatus="lookupActiveOrHistorical"
-            @business="onBusiness($event)"
-          />
-          <BusinessFetch
-            v-else
-            @business="onBusiness($event)"
-          />
-        </template>
-        <v-form v-else ref="businessLookupTextFieldForm">
-          <v-text-field
-            append-icon="mdi-close"
-            readonly
-            filled
-            :label="businessLookupLabel"
-            :value="business.legalName"
-            :rules="rules"
-            :hint="businessLookupHint"
-            @click:append="onBusiness(null)"
-            @keyup.delete="onBusiness(null)"
-          />
-        </v-form>
-      </v-col>
-
-      <!-- Jurisdiction -->
-      <v-col v-if="showJurisdiction" cols="12" :md="isSelectedCompanyXPro ? 4 : 6">
-        <NestedSelect
-          label="Select your home jurisdiction"
-          :menuItems="jurisdictionOptions"
-          :error-messages="getErrors.includes('jurisdiction') ? 'Please select a jurisdiction' : ''"
-          :value="jurisdiction"
-          @change="setClearErrors(); onJurisdictionChange($event)"
-        />
-      </v-col>
-
-      <!-- Entity Type -->
-      <v-col v-if="showEntityType" cols="12" :md="isXproFlow ? 4 : ( isConversion ? 12 : 6)">
-        <v-text-field
-          v-if="isConversion && isBenBusiness"
-          filled
-          disabled
-          hide-details
-          label="Benefit Company to Limited Company"
-        />
-        <v-tooltip
-          v-else
-          top
-          content-class="top-tooltip"
-          :disabled="getRequestActionCd !== NrRequestActionCodes.CONVERSION || !entityConversionText || isMobile"
-          transition="fade-transition"
-        >
-          <template v-slot:activator="scope">
-            <div v-on="scope.on">
-              <v-select
-                id="entity-type-options-select"
-                :label="isConversion ? 'Select type of business to alter into' : 'Select type of business in B.C.'"
-                :error-messages="getErrors.includes('entity_type_cd') ? 'Please select a business type' : ''"
-                :items="entityTypeOptions"
-                :menu-props="{ bottom: true, offsetY: true}"
-                ref="selectBusinessTypeRef"
-                hide-details="auto"
-                filled
-                :value="isConversion ? getOriginEntityTypeCd : entity_type_cd"
-                @change="setClearErrors(); entity_type_cd = $event"
-              >
-                <template v-slot:item="{ item }">
-                  <v-tooltip
-                    :right="isScreenLg"
-                    :left="!isScreenLg"
-                    :disabled="!item.blurbs || isMobile"
-                    :content-class="!isScreenLg ? 'left-tooltip' : ''"
-                    transition="fade-transition"
-                  >
-                    <template v-slot:activator="scope">
-                      <span
-                        v-on="scope.on"
-                        class="list-item"
-                        :class="{ 'last-select-item': item.value === 'INFO' }"
-                      >{{ item.text }}</span>
-                    </template>
-
-                    <div v-for="(blurb, index) in entityBlurbs(item.value)" :key="`blurb-${index}`">
-                      <span :class="{ 'tooltip-bullet': index !== 0}">
-                        {{ blurb }}
-                      </span>
-                    </div>
-                  </v-tooltip>
-                </template>
-              </v-select>
-            </div>
-          </template>
-          <span>{{ entityConversionText }}</span>
-        </v-tooltip>
-      </v-col>
-
-      <!-- once an entity type is selected, is Federal, or is Restorable, ... -->
-      <template v-if="entity_type_cd || isFederal || isRestorable">
-        <!-- Company Type -->
-        <v-col v-if="showCompanyTypeRadioButtons" cols="12">
-          <p class="font-weight-bold h6">Select a company type:</p>
-          <v-radio-group
-            v-model="selectedCompanyType"
-            class="mt-3"
-            hide-details
-            mandatory
-            row
-            @change="selectedCompanyType = $event"
-          >
-            <v-radio
-              id="named-company-radio"
-              label="Named Company"
-              :value="CompanyTypes.NAMED_COMPANY"
-            />
-            <v-radio
-              id="numbered-company-radio"
-              label="Numbered Company"
-              :value="CompanyTypes.NUMBERED_COMPANY"
-            />
-          </v-radio-group>
-        </v-col>
-
-        <!-- Numbered company (or amalgamation) -->
-        <template v-if="isNamedCompany || isAmalgamation">
-          <!-- Xpro/Federal bullets -->
-          <v-col v-if="isXproFlow && isFederal" cols="12" :md="isSelectedCompanyXPro ? 10 : 8">
-            <ul class="bullet-points">
-              <li>Federally incorporated businesses do not need a Name Request.</li>
+      <DummyInputBox v-if="!getSearchRequest" />
 
-              <li v-if="isAmalgamation">
-                To register your extraprovincial amalgamation, download and complete
-                <a :href="federalAmalgamationFormLink">
-                  this form <v-icon small class="ml-1" color="primary">mdi-open-in-new</v-icon>
-                </a>.
-              </li>
+      <!-- New BC Business flow -->
+      <template v-if="isNewBcBusiness">
+        <EntityType v-if="getLocation" />
+        <CompanyType v-if="entity_type_cd" />
+        <NumberedCompanyBullets v-if="isNumberedCompany" />
 
-              <li v-else-if="isRestoration && isSelectedXproAndRestorable">
-                To reinstate your business, complete
-                <a :href="fullReinstatementFormLink">
-                  this form <v-icon small class="ml-1" color="primary">mdi-open-in-new</v-icon>
-                </a> for a full reinstatement or
-                <a :href="limitedReinstatementFormLink">
-                  this form  <v-icon small class="ml-1" color="primary">mdi-open-in-new</v-icon>
-                </a> for a limited reinstatement.
-              </li>
-
-              <li v-else>
-                You may register your extraprovincial business immediately using its existing name
-                at Corporate Online.
-              </li>
-            </ul>
-          </v-col>
-
-          <!-- XPRO/MRAS number/name search/input -->
-          <v-col v-if="!isFederal" cols="12" :md="(isXproFlow || showDesignation) ? 8 : 12">
+        <template v-if="isNamedCompany">
+          <v-col cols="12" :md="showDesignation ? '8' : '12'">
             <NameInput
-              id="name-input-component"
-              :is-mras-search="(isXproFlow && isMrasJurisdiction && !noCorpNum)"
+              :is-mras-search="(isXproFlow && isMrasJurisdiction && !getHasNoCorpNum)"
               @emit-corp-num-validity="corpNumValid = $event"
             />
           </v-col>
+          <Designation cols="12" md="4" />
+        </template>
+      </template>
 
-          <!-- Designation -->
-          <v-col v-if="showDesignation" cols="12" md="4">
-            <v-select
-              :error-messages="getErrors.includes('designation') ? 'Please enter a designation' : ''"
-              filled
-              :items="designationOptions"
-              label="Select a Designation"
-              :readonly="!entity_type_cd"
-              :menu-props="{ bottom: true, offsetY: true}"
-              :value="getDesignation"
-              @input="setDesignation($event)"
-              class="mb-n3"
-              @change="setClearErrors()"
-            />
-          </v-col>
+      <!-- New Xpro Business flow -->
+      <template v-else-if="isNewXproBusiness">
+        <EntityType v-if="getLocation && !isFederal" cols="12" md="4" />
+        <Jurisdiction />
+        <CompanyType v-if="showCompanyTypeRadioButtons" />
+      </template>
 
-          <!-- Corporate Number checkbox, only for Canadian MRAS jurisdictions -->
-          <v-col v-if="isCanadian && isMrasJurisdiction" class="d-flex justify-end">
-            <v-tooltip
-              top min-width="390"
-              content-class="top-tooltip"
-              transition="fade-transition"
-              :disabled="isMobile"
-            >
-              <template v-slot:activator="{ on }">
-                <v-checkbox
-                  v-model="noCorpNum"
-                  id="corp-num-checkbox"
-                  class="copy-small mt-0 pt-0"
-                  hide-details
-                  v-slot:label
-                  v-on="on"
-                >
-                  <template>
-                    <span v-on="on" class="copy-small">I don't have a corporate number</span>
-                  </template>
-                </v-checkbox>
-              </template>
+      <!-- Continuation In flow -->
+      <template v-else-if="isContinuationIn">
+        <EntityType v-if="getLocation" />
+        <CompanyType v-if="showCompanyTypeRadioButtons" />
+      </template>
 
-              <p>If you don't have or don't know the corporation number of the business, enter the full legal name
-                of the business in its home jurisdiction.</p>
+      <!-- Change Name flow -->
+      <template v-else-if="isChangeName">
+        <BusinessLookupFetch />
+        <Jurisdiction v-if="isChangeNameXpro" />
+        <CompanyType v-if="showCompanyTypeRadioButtons" />
+      </template>
 
-              <p>Note: If the home jurisdiction requires a name reservation, you may want to complete a name search
-                in the home jurisdiction first to ensure that the name is available and then return to BC.</p>
-            </v-tooltip>
-          </v-col>
-        </template>
+      <!-- Amalgamation flow -->
+      <template v-else-if="isAmalgamation">
+        <EntityType v-if="getLocation && !isFederal" />
 
-        <!-- Numbered company (or Federal) -->
-        <template v-if="isNumberedCompany || isFederal" cols="12">
-          <v-col v-if="isConversion && !isAlterOnline(getConversionType)">
-            <div class="contact-registries">
-              <p>To complete this alteration, please contact us at:</p>
-              <p>
-                  <v-icon small>mdi-phone</v-icon>&nbsp;Canada and U.S. Toll Free:
-                  <a href="tel:+1877-370-1033">1-877-370-1033</a>
-              </p>
-              <p><v-icon small>mdi-phone</v-icon>&nbsp;Victoria Office:
-                <a href="tel:250-370-1033">250-370-1033</a>
-              </p>
-              <p><v-icon small>mdi-email</v-icon>&nbsp;Email:
-                <a href="mailto:BCRegistries@gov.bc.ca">BCRegistries@gov.bc.ca</a>
-              </p>
-            </div>
-          </v-col>
-          <v-col v-else-if="!isXproFlow" cols="12">
-            <ul class="bullet-points">
-              <li>Your business name will be the Incorporation Number assigned by the Registry.</li>
-              <li>You can change your business name at a later date.</li>
-              <li>It is not possible to request a specific Incorporation Number.</li>
-            </ul>
-          </v-col>
+        <template v-if="isXproEntityType(getEntityTypeCd)">
+          <Jurisdiction />
+        </template>
 
-          <!-- Go to COLIN / Incorporate Now buttons -->
-          <v-col v-if = "!isConversion || isAlterOnline(getConversionType)" cols="12"
-            class="d-flex justify-center"
-          >
-            <v-btn
-              v-if="showColinButton"
-              class="px-9"
-              id="go-to-colin-button"
-              :href="colinLink"
-              target="_blank"
-            >
-              Go to Corporate Online to {{ isConversion ? 'Alter' : 'Register' }}
-              <v-icon small class="ml-1">mdi-open-in-new</v-icon>
-            </v-btn>
-            <v-btn
-              v-else-if="showActionButton"
-              class="px-9"
-              id="incorporate-now-button"
-              @click="actionNowClicked()"
-            >
-              {{ actionNowButtonText }}
-            </v-btn>
-          </v-col>
+        <template v-else>
+          <CompanyType v-if="showCompanyTypeRadioButtons" />
         </template>
       </template>
+
+      <!-- Conversion (aka Alteration) flow -->
+      <template v-else-if="isConversion">
+        <EntityType v-if="getSearchBusiness && isAlterable" />
+        <BusinessLookupFetch />
+        <CompanyType v-if="showCompanyTypeRadioButtons" />
+      </template>
+
+      <!-- Restoration / Reinstatement flow -->
+      <template v-else-if="isRestoration">
+        <EntityType cols="12" md="6" />
+        <BusinessLookupFetch />
+        <Jurisdiction v-if="isSelectedXproAndRestorable" cols="12" md="4" />
+        <CompanyType v-if="showCompanyTypeRadioButtons" />
+      </template>
     </v-row>
 
+    <!-- Xpro/Federal bullets -->
+    <!-- *** TODO: move this into flows above -->
+    <!-- *** TODO: simply this button's logic -->
+    <template v-if="entity_type_cd || isFederal || isRestorable">
+      <v-row v-if="isNamedCompany || isAmalgamation">
+        <XproFederalBullets v-if="isXproFlow && isFederal" cols="12" />
+      </v-row>
+    </template>
+
+    <!-- Corporate Number checkbox, only for Canadian MRAS jurisdictions -->
+    <!-- *** TODO: move this into flows above -->
+    <!-- *** TODO: simply this button's logic -->
+    <template v-if="entity_type_cd || isFederal || isRestorable">
+      <v-row v-if="isNamedCompany || isAmalgamation">
+        <v-col cols="12" class="d-flex justify-end">
+          <CorpNumberCheckbox v-if="isCanadian && isMrasJurisdiction" />
+        </v-col>
+      </v-row>
+    </template>
+
+    <!-- Go to COLIN / Incorporate Now buttons -->
+    <!-- *** TODO: keep this as common code at bottom of template -->
+    <!-- *** TODO: simply this button's logic -->
+    <template v-if="entity_type_cd || isFederal || isRestorable">
+      <v-row v-if="isNumberedCompany || isFederal">
+        <v-col v-if = "!isConversion || isAlterOnline(getConversionType)" cols="12"
+          class="d-flex justify-center"
+        >
+          <v-btn
+            v-if="showColinButton"
+            class="px-9"
+            id="go-to-colin-button"
+            :href="colinLink"
+            target="_blank"
+          >
+            Go to Corporate Online to {{ isConversion ? 'Alter' : 'Register' }}
+            <v-icon small class="ml-1">mdi-open-in-new</v-icon>
+          </v-btn>
+          <v-btn
+            v-else-if="showActionButton"
+            class="px-9"
+            id="incorporate-now-button"
+            @click="actionNowClicked()"
+          >
+            {{ actionNowButtonText }}
+          </v-btn>
+        </v-col>
+      </v-row>
+    </template>
+
     <!-- Check This Name button -->
+    <!-- *** TODO: keep this as common code at bottom of template -->
     <template v-if="isShowCheckNameButton">
       <v-row justify="center" class="mt-6">
         <v-col cols="auto">
@@ -331,112 +158,50 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins, Vue, Watch } from 'vue-property-decorator'
-import { Action, Getter } from 'vuex-class'
+import { Component, Mixins } from 'vue-property-decorator'
 
-// 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 { BusinessSearchIF, ConversionTypesI, EntityI, FormType, RequestActionsI } from '@/interfaces'
-import { ActionBindingIF } from '@/interfaces/store-interfaces'
-import { AccountType, CompanyTypes, CorpTypeCd, EntityStates, EntityTypes,
-  Location, NrRequestActionCodes, NrRequestTypeCodes } from '@/enums'
-import { CommonMixin, NrAffiliationMixin } from '@/mixins'
-import { BcMapping, CanJurisdictions, ConversionTypes, Designations,
-  IntlJurisdictions, RequestActions, XproMapping } from '@/list-data'
+import BusinessLookupFetch from '@/components/new-request/search-components/business-lookup-fetch.vue'
+import CompanyType from '@/components/new-request/search-components/company-type.vue'
+import CorpNumberCheckbox from '@/components/new-request/search-components/corp-number-checkbox.vue'
+import Designation from '@/components/new-request/search-components/designation.vue'
+import DummyInputBox from '@/components/new-request/search-components/dummy-input-box.vue'
+import EntityType from '@/components/new-request/search-components/entity-type.vue'
+import Jurisdiction from '@/components/new-request/search-components/jurisdiction.vue'
+import NumberedCompanyBullets from '@/components/new-request/search-components/numbered-company-bullets.vue'
+import RequestAction from '@/components/new-request/search-components/request-action.vue'
+import XproFederalBullets from '@/components/new-request/search-components/xpro-federal-bullets.vue'
+
+import { CompanyTypes, EntityTypes } from '@/enums'
+import { CommonMixin, NrAffiliationMixin, SearchMixin } from '@/mixins'
+import { Designations } 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, BusinessFetch, NameInput, NestedSelect }
-})
-export default class Search extends Mixins(CommonMixin, NrAffiliationMixin) {
-  // Refs
-  $refs!: {
-    businessLookupTextFieldForm: FormType
-    selectBusinessTypeRef: FormType
+  components: {
+    BusinessLookupFetch,
+    CompanyType,
+    CorpNumberCheckbox,
+    Designation,
+    DummyInputBox,
+    EntityType,
+    Jurisdiction,
+    NameInput,
+    NumberedCompanyBullets,
+    RequestAction,
+    XproFederalBullets
   }
-
-  // Enums for template
-  readonly CompanyTypes = CompanyTypes
-  readonly NrRequestActionCodes = NrRequestActionCodes
-  readonly RequestActions = RequestActions
-
-  // Store getters
-  @Getter getConversionType!: NrRequestTypeCodes
-  @Getter getConversionTypeOptions!: ConversionTypesI[]
-  @Getter getDesignation!: string
-  @Getter getDisplayedComponent!: string
-  @Getter getEntityBlurbs!: Array<EntityI>
-  @Getter getEntityTypeCd!: EntityTypes
-  @Getter getEntityTypeOptions!: Array<EntityI>
-  @Getter getEntityTextFromValue!: string
-  @Getter getErrors!: string[]
-  @Getter getHasNoCorpNum!: boolean
-  @Getter getLocation!: Location
-  @Getter getOriginEntityTypeCd!: EntityTypes
-  @Getter getRequestActionCd!: NrRequestActionCodes
-  @Getter isAmalgamation!: boolean
-  @Getter isAssumed!: boolean
-  @Getter isAuthenticated!: boolean
-  @Getter isCanadian!: boolean
-  @Getter isChangeName!: boolean
-  @Getter isContinuationIn!: boolean
-  @Getter isConversion!: boolean
-  @Getter isFederal!: boolean
-  @Getter isMobile!: boolean
-  @Getter isMrasJurisdiction!: boolean
-  @Getter isNumberedEntityType!: boolean
-  @Getter isRestoration!: boolean
-  @Getter isXproFlow!: boolean
-
-  // Store actions
-  @Action setConversionType!: ActionBindingIF
-  @Action setCorpNum!: ActionBindingIF
-  @Action setCorpSearch!: ActionBindingIF
-  @Action setClearErrors!: () => void
-  @Action setDesignation!: ActionBindingIF
-  @Action setDoNameCheck!: ActionBindingIF
-  @Action setEntityTypeCd!: ActionBindingIF
-  @Action setExtendedRequestType!: ActionBindingIF
-  @Action setJurisdictionCd!: ActionBindingIF
-  @Action setLocation!: ActionBindingIF
-  @Action setName!: ActionBindingIF
-  @Action setNoCorpNum!: ActionBindingIF
-  @Action setOriginEntityTypeCd!: ActionBindingIF
-  @Action setPickEntityModalVisible!: ActionBindingIF
-  @Action setRequestAction!: ActionBindingIF
-  @Action startAnalyzeName!: ActionBindingIF
-
+})
+export default class Search extends Mixins(CommonMixin, NrAffiliationMixin, SearchMixin) {
   // Constants
   readonly colinLink = sessionStorage.getItem('CORPORATE_ONLINE_URL')
-  readonly corpOnlineLink = 'https://www.corporateonline.gov.bc.ca/'
-  readonly EntityTypes = EntityTypes
-  readonly federalAmalgamationFormLink = 'https://www2.gov.bc.ca/assets/gov/employment-business-and-economic-' +
-    'development/business-management/permits-licences-and-registration/registries-packages/' +
-    'pack_34_xco_-_amalgamation_application_and_business_number_request.pdf'
-  readonly fullReinstatementFormLink = 'https://www2.gov.bc.ca/assets/gov/employment-business-and-economic-' +
-    'development/business-management/permits-licences-and-registration/registries-forms/' +
-    'form_31_xco_-_full_reinstatement_application.pdf'
-  readonly limitedReinstatementFormLink = 'https://www2.gov.bc.ca/assets/gov/employment-business-and-economic-' +
-    'development/business-management/permits-licences-and-registration/registries-forms/' +
-    'form_29_xco_-_limited_reinstatement_application.pdf'
 
-  // Local properties
+  // Variables
   corpNumValid = true
-  request = null as RequestActionsI
-  jurisdiction = null as any
-  selectedCompanyType = null as CompanyTypes
-  activeActionGroup = NaN
-  showRequestActionTooltip = false
-  business = null as BusinessSearchIF
 
   private mounted () {
     this.$nextTick(() => {
@@ -453,67 +218,6 @@ export default class Search extends Mixins(CommonMixin, NrAffiliationMixin) {
     this.scrollTo('namerequest-sbc-header')
   }
 
-  // Text field rules for the business lookup
-  get rules (): any {
-    return [
-      value => {
-        if (this.isConversion) {
-          return this.isPassAlterValidation || 'This business cannot alter their business type'
-        } else if (this.isRestoration) {
-          return this.isRestorable || 'This business cannot be restored.'
-        }
-        return true
-      }]
-  }
-
-  get businessLookupLabel (): string {
-    if (this.isAuthenticated) {
-      if (this.lookupActiveOrHistorical === EntityStates.HISTORICAL) {
-        return 'Find a historical business'
-      } else {
-        return 'Find an existing business'
-      }
-    } else {
-      if (this.lookupActiveOrHistorical === EntityStates.HISTORICAL) {
-        return 'Fetch a historical business'
-      } else {
-        return 'Fetch an existing business'
-      }
-    }
-  }
-
-  get businessLookupHint (): string {
-    if (this.isAuthenticated) {
-      return 'Search by name, incorporation or registration number of existing business'
-    } else {
-      return 'Enter registration number of existing business'
-    }
-  }
-
-  get isBenBusiness (): boolean {
-    return this.business?.legalType as string === CorpTypeCd.BENEFIT_COMPANY
-  }
-
-  /** Search businesses with business lookup depending on the Action selected */
-  get lookupActiveOrHistorical (): String {
-    return this.isRestoration ? EntityStates.HISTORICAL : EntityStates.ACTIVE
-  }
-
-  get isNewBcBusiness (): boolean {
-    return (this.getRequestActionCd === NrRequestActionCodes.NEW_BUSINESS && this.request?.group === 0)
-  }
-
-  get isNewXproBusiness (): boolean {
-    return (this.getRequestActionCd === NrRequestActionCodes.NEW_BUSINESS && this.request?.group === 1)
-  }
-
-  get isPassAlterValidation (): boolean {
-    const legalType = this.business.legalType as unknown as CorpTypeCd
-    return legalType === CorpTypeCd.BC_COMPANY ||
-      legalType === CorpTypeCd.BENEFIT_COMPANY ||
-      legalType === CorpTypeCd.BC_ULC_COMPANY
-  }
-
   get showJurisdiction (): boolean {
     if (this.isAmalgamation && this.isXproEntityType(this.getEntityTypeCd)) return true
     if (this.isNewXproBusiness) return true
@@ -524,7 +228,7 @@ export default class Search extends Mixins(CommonMixin, NrAffiliationMixin) {
 
   get showEntityType (): boolean {
     if (this.isConversion) {
-      return this.business && this.isPassAlterValidation
+      return (!!this.getSearchBusiness && this.isAlterable)
     }
     if (this.getLocation && !this.isFederal && !this.isRestoration && !this.isChangeName) return true
     return false
@@ -535,102 +239,25 @@ export default class Search extends Mixins(CommonMixin, NrAffiliationMixin) {
     return false
   }
 
-  /** Whether current account type is Premium, SBC Staff or Staff. */
-  get isPremiumOrStaff (): boolean {
-    return [AccountType.PREMIUM, AccountType.SBC_STAFF, AccountType.STAFF]
-      .includes(JSON.parse(sessionStorage.getItem(SessionStorageKeys.CurrentAccount))?.accountType)
-  }
-
   get showDesignation (): boolean {
-    if (this.getEntityTypeCd) return (Designations[this.getEntityTypeCd]?.end && !this.isXproFlow)
-    // hide until entity type is selected and needs it
-    return false
-  }
-
-  get designationOptions (): Array<string> {
-    let output = Designations[this.getEntityTypeCd]?.words as string[]
-    if (this.getEntityTypeCd === EntityTypes.CC) {
-      output = Designations[EntityTypes.CR].words
-    }
-    return output
+    // return (Designations[this.getEntityTypeCd]?.end && !this.isXproFlow) // *** TODO: delete
+    return (Designations[this.getEntityTypeCd]?.end || false)
   }
 
   get showCompanyTypeRadioButtons (): boolean {
     if (!this.entity_type_cd && !this.getConversionType && !this.isFederal) return false
     if (this.isConversion) {
-      return this.business !== null && this.getConversionType !== null
+      return (!!this.getSearchBusiness && !!this.getConversionType)
     }
     const isSociety = (this.isSocietyEnabled() && this.getEntityTypeCd === EntityTypes.SO)
     // check if numbered is not allowed or society NR name is required
     if (!this.isNumberedEntityType || isSociety) {
-      this.selectedCompanyType = CompanyTypes.NAMED_COMPANY
+      this.setSearchCompanyType(CompanyTypes.NAMED_COMPANY)
       return false
     }
     return true
   }
 
-  get isScreenLg () {
-    return this.$vuetify.breakpoint.lgAndUp
-  }
-
-  // FUTURE: clean up return type
-  entityBlurbs (entity_type_cd: string): string | string[] | string[][] {
-    return this.getEntityBlurbs.find(type => type.value === entity_type_cd)?.blurbs
-  }
-
-  get entity_type_cd (): EntityTypes {
-    return this.getEntityTypeCd
-  }
-
-  set entity_type_cd (type: EntityTypes) {
-    // special case for sub-menu
-    if (type === EntityTypes.INFO) {
-      // set empty value until user chooses a new one
-      // (don't use null in case it's already null as we want reactivity)
-      this.setEntityTypeCd('')
-      // show the "View all business types" modal
-      this.setPickEntityModalVisible(true)
-      return
-    }
-    // special case for conversion
-    if (this.getEntityTypeCd && this.isConversion && type) {
-      const value = type as unknown as NrRequestTypeCodes
-      const entity_type_cd = ConversionTypes.find(conv => conv.value === value)?.entity_type_cd || null
-      this.setEntityTypeCd(entity_type_cd)
-      this.setConversionType(type)
-      this.setConversionType(type)
-      return
-    }
-    this.setEntityTypeCd(type)
-  }
-
-  get noCorpNum (): boolean {
-    return this.getHasNoCorpNum
-  }
-
-  set noCorpNum (value: boolean) {
-    this.setNoCorpNum(value)
-  }
-
-  get entityTypeOptions () {
-    return (this.isConversion ? this.getConversionTypeOptions : this.getEntityTypeOptions)
-  }
-
-  get entityConversionText () {
-    // convert NrRequestTypeCodes -> EntityTypes
-    return ConversionTypes.find(conversion => conversion.value === this.getConversionType)?.text
-  }
-
-  /** Whether selected radio button is Named Company. */
-  get isNamedCompany (): boolean {
-    return (this.selectedCompanyType === CompanyTypes.NAMED_COMPANY)
-  }
-
-  /** Whether selected radio button is Numbered Company. */
-  get isNumberedCompany (): boolean {
-    return (this.selectedCompanyType === CompanyTypes.NUMBERED_COMPANY)
-  }
-
   get showActionButton (): boolean {
     // Since Federal Reinstatement is a paper filing, we don't show any buttons.
     // The same conditional is in showColinButton().
@@ -690,132 +317,9 @@ export default class Search extends Mixins(CommonMixin, NrAffiliationMixin) {
     return 'Incorporate Now'
   }
 
-  get jurisdictionOptions (): Array<any> {
-    const array = []
-
-    // add in Canadian jurisdictions (not including BC)
-    array.push({ isHeader: true, group: 0, text: 'Canadian' })
-    CanJurisdictions
-      .filter(jur => jur.value !== Location.BC)
-      .forEach(jur => array.push({
-        group: 0,
-        text: jur.text,
-        value: jur.value,
-        separator: (jur.value === Location.FD)
-      }))
-
-    // add in International jurisdictions (not including CA)
-    array.push({ isHeader: true, group: 1, text: 'International' })
-    IntlJurisdictions
-      .filter(jur => jur.value !== Location.CA)
-      .forEach(jur => array.push({
-        group: 1,
-        text: jur.text,
-        value: jur.value,
-        separator: false
-      }))
-
-    return array
-  }
-
-  get entityTextFromValue (): string {
-    return this.getEntityTextFromValue || 'specified business type'
-  }
-
-  /** Event handled for business lookup/fetch. */
-  async onBusiness (business: BusinessSearchIF): Promise<void> {
-    this.business = business
-    this.entity_type_cd = this.business?.legalType || null
-    this.setCorpNum(business?.identifier || null)
-    this.setEntityTypeCd(this.business?.legalType)
-    this.setName('')
-
-    // Waiting for DOM update to be able to access the Ref. Trigger form validation.
-    // Need to do that because the ref is in a conditional.
-    await Vue.nextTick()
-    if (this.business) this.$refs.businessLookupTextFieldForm.validate()
-
-    if (this.isConversion) {
-      if (this.business) {
-        // set the from business for alteration (conversion)
-        this.setOriginEntityTypeCd(this.business.legalType)
-        // special case if the from business is BEN
-        // set conversionType & entity_type_cd because there's only one alteration type for it
-        if (this.isBenBusiness) {
-          this.setConversionType(NrRequestTypeCodes.CONVERT_CORP)
-          this.setEntityTypeCd(EntityTypes.BC)
-        }
-      } else {
-        // clear all related fields when clearing business search/fetch for alter
-        this.setConversionType(null)
-        this.setOriginEntityTypeCd(null)
-        this.selectedCompanyType = null
-      }
-    }
-
-    if (this.isRestoration) {
-      // Check if not XPRO and BC restorable
-      if (!this.isSelectedXproAndRestorable && this.isBcRestorable) {
-        this.setLocation(Location.BC)
-        this.setEntityTypeCd(this.corpTypeToEntityType(this.business.legalType as unknown as CorpTypeCd))
-      } else if (this.isSelectedXproAndRestorable) { // Check if XPRO and restorable
-        this.setLocation(Location.CA)
-        this.setEntityTypeCd(this.business.legalType)
-      } else {
-        this.setEntityTypeCd(null)
-      }
-    }
-
-    if (this.isChangeName) {
-      if (this.isBenBcUlcCccCorpType) {
-        this.setLocation(Location.BC)
-        this.setEntityTypeCd(this.corpTypeToEntityType(this.business?.legalType as unknown as CorpTypeCd))
-      } else {
-        this.setEntityTypeCd(this.business.legalType)
-      }
-
-      if (this.isChangeNameXpro) {
-        this.setLocation(Location.CA)
-        this.setEntityTypeCd(this.business.legalType)
-      }
-    }
-  }
-
-  /** Whether the selected XPRO is restorable. */
-  get isSelectedXproAndRestorable (): boolean {
-    return XproMapping.REH.includes(this.business?.legalType)
-  }
-
-  /** Whether the selected business' legal type is BC and restorable. */
-  get isBcRestorable (): boolean {
-    return BcMapping.REH.includes(this.corpTypeToEntityType(this.business?.legalType as unknown as CorpTypeCd))
-  }
-
-  /** Whether company is restorable. */
-  get isRestorable (): boolean {
-    return this.isSelectedXproAndRestorable || this.isBcRestorable
-  }
-
-  /** Map to correct Entity type if legal type is Ben Bc Ulc Ccc */
-  isBenBcUlcCccCorpType (): boolean {
-    return (
-      this.business?.legalType === EntityTypes.BC ||
-      this.business?.legalType === EntityTypes.BEN ||
-      this.business?.legalType === EntityTypes.CC ||
-      this.business?.legalType === EntityTypes.ULC
-    )
-  }
-
-  get isChangeNameXpro (): boolean {
-    return XproMapping.CHG.includes(this.business?.legalType)
-  }
-
-  get isSelectedCompanyXPro (): boolean {
-    if (this.isRestoration) {
-      return this.isSelectedXproAndRestorable
-    }
-    if (this.isChangeName) {
-      return this.isChangeNameXpro
+  get isShowCheckNameButton (): boolean {
+    if (!this.isFederal && this.isNamedCompany && this.entity_type_cd) {
+      return true
     }
     return false
   }
@@ -829,7 +333,7 @@ export default class Search extends Mixins(CommonMixin, NrAffiliationMixin) {
     const legalType = this.entityTypeToCorpType(this.entity_type_cd)
     if (this.isAuthenticated) {
       if (this.isConversion || this.isRestoration || this.isChangeName) {
-        this.goToEntityDashboard(this.business.identifier)
+        this.goToEntityDashboard(this.getSearchBusiness.identifier)
       } else {
         await this.incorporateNow(legalType)
       }
@@ -849,104 +353,12 @@ export default class Search extends Mixins(CommonMixin, NrAffiliationMixin) {
     await this.startAnalyzeName(null)
     if (this.isXproFlow) this.$root.$emit('showSpinner', false)
   }
-
-  get isShowCheckNameButton (): boolean {
-    if (!this.isFederal && this.isNamedCompany && this.entity_type_cd) {
-      return true
-    }
-    return false
-  }
-
-  @Watch('entity_type_cd')
-  clearDesignation () {
-    this.setDesignation('')
-    // clear "Select a Business Type" field when "View all business types" or Society is selected
-    if (!this.entity_type_cd || this.entity_type_cd === EntityTypes.INFO) {
-      this.$refs.selectBusinessTypeRef && this.$refs.selectBusinessTypeRef.reset()
-    }
-  }
-
-  /** Resets search values when location changes. */
-  @Watch('getLocation')
-  watchLocation (newVal: Location) {
-    // if they need to search by corp num first then reset the name
-    if ([Location.CA, Location.FD, Location.IN, Location.US].includes(newVal)) {
-      this.setName('')
-    }
-    this.setCorpSearch('')
-    this.setNoCorpNum(false)
-  }
-
-  /** Resets fields when returned to the Tabs component */
-  @Watch('getDisplayedComponent')
-  watchDisplayedComponent (displayedComponent: string) {
-    if (displayedComponent === 'Tabs') {
-      this.onBusiness(null)
-    }
-  }
-
-  /** Called when Request Action menu item is changed. */
-  async onRequestActionChange (request: RequestActionsI): Promise<void> {
-    this.request = request
-
-    this.setRequestAction(this.request?.value || null)
-
-    // clear previous state
-    this.business = null
-    this.jurisdiction = null
-    this.setLocation(null)
-    this.setJurisdictionCd(null)
-    if (this.entity_type_cd) this.entity_type_cd = null
-    this.selectedCompanyType = null
-    this.setCorpNum(null)
-    this.setName('')
-
-    // wait for updates
-    await Vue.nextTick()
-
-    if (this.getRequestActionCd !== NrRequestActionCodes.NEW_BUSINESS) {
-      this.setExtendedRequestType(this.request)
-    }
-
-    // set default location for requests where there is only one location option
-    if (this.isNewBcBusiness || this.isContinuationIn || this.isConversion || this.isAmalgamation) {
-      // *** TODO: set location for amalgamation later (depending on entity type selected)
-      this.setLocation(Location.BC)
-    } else if (this.isAssumed && this.getLocation === Location.BC) {
-      this.setLocation(Location.CA)
-    }
-
-    // calculate whether to show tooltip
-    // (after waiting for DOM update)
-    await Vue.nextTick()
-    const el = document.querySelector('.request-action-select .v-select__selection') as any
-    const offsetWidth = el?.offsetWidth as number
-    const scrollWidth = el?.scrollWidth as number
-    this.showRequestActionTooltip = (offsetWidth < scrollWidth)
-  }
-
-  /** Called when Jurisdiction menu item is changed. */
-  onJurisdictionChange (jurisdiction: any): void {
-    this.jurisdiction = jurisdiction
-
-    this.setLocation(jurisdiction.group === 0 ? Location.CA : Location.IN)
-    this.setJurisdictionCd(jurisdiction.value)
-    // Resetting the entity type when a business is selected (after jurisdiction change)
-    if (this.business) {
-      this.setEntityTypeCd(this.business.legalType)
-    }
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
 
-.v-icon.mdi-phone,
-.v-icon.mdi-email {
-  color: $app-dk-blue;
-}
-
 .v-list {
   padding: 0;
 }
@@ -956,21 +368,6 @@ export default class Search extends Mixins(CommonMixin, NrAffiliationMixin) {
   padding: 8px;
 }
 
-.last-select-item {
-  border-top: 1px solid $gray3;
-  padding: 20px 8px !important;
-}
-
-// hide disabled list items
-::v-deep .v-list-item:has(.v-list-item__content.hide-me) {
-  display: none;
-}
-
-// make the business lookup close button always blue
-::v-deep .business-lookup button.mdi-close {
-  color: $app-blue;
-}
-
 // set content colour when hovering over list items
 .v-list-item:hover .v-list-item__content,
 .list-item:hover {
@@ -1005,12 +402,6 @@ export default class Search extends Mixins(CommonMixin, NrAffiliationMixin) {
   width: 17rem !important;
 }
 
-// Line spacing between bullet points and sizing
-.bullet-points {
-  line-height: 1.5rem;
-  font-size: $px-15;
-}
-
 // Vuetify overrides
 ::v-deep {
   .theme--light.v-btn.v-btn--disabled:not(.v-btn--flat):not(.v-btn--text):not(.v-btn--outlined) {
@@ -1034,11 +425,6 @@ export default class Search extends Mixins(CommonMixin, NrAffiliationMixin) {
     color: $gray9 !important;
   }
 
-  // reduce checkbox height when there are no error messages
-  .v-messages:not(.error--text) {
-    margin-bottom: -22px;
-  }
-
   .theme--light.v-list-item:not(.v-list-item--active):not(.v-list-item--disabled) {
     color: $gray7 !important;
   }
diff --git a/src/components/tabs.vue b/src/components/tabs.vue
index a8030304c..30ba89ed6 100644
--- a/src/components/tabs.vue
+++ b/src/components/tabs.vue
@@ -89,7 +89,6 @@ export default class Tabs extends Mixins(CommonMixin) {
 
 .mobile-font {
   font-size: $px-14;
-  max-width: 120px;
 }
 
 #tabs-landing-comp {
diff --git a/src/interfaces/new-request-interface.ts b/src/interfaces/new-request-interface.ts
index 9ca63be77..1c647bee1 100644
--- a/src/interfaces/new-request-interface.ts
+++ b/src/interfaces/new-request-interface.ts
@@ -1,9 +1,8 @@
-import {
-  AnalysisJSONI, ApplicantI, ConversionTypesI, ExistingRequestSearchI, NameRequestI,
-  RequestNameI, SelectOptionsI, StatsI, SubmissionTypeT, WaitingAddressSearchI
-} from '@/interfaces/models'
-import { NameChoicesIF, NrDataIF, RequestOrConsentIF } from '@/interfaces'
-import { EntityTypes, Location, NrAffiliationErrors, NrRequestActionCodes, NrRequestTypeCodes } from '@/enums'
+import { AnalysisJSONI, ApplicantI, ConversionTypesI, ExistingRequestSearchI, NameRequestI, RequestActionsI,
+  RequestNameI, SelectOptionsI, StatsI, SubmissionTypeT, WaitingAddressSearchI } from '@/interfaces/models'
+import { BusinessSearchIF, NameChoicesIF, NrDataIF, RequestOrConsentIF } from '@/interfaces'
+import { CompanyTypes, EntityTypes, Location, NrAffiliationErrors, NrRequestActionCodes, NrRequestTypeCodes }
+  from '@/enums'
 
 interface RequestNameMapI extends RequestNameI {}
 
@@ -61,6 +60,12 @@ export interface NewRequestIF {
   request_action_cd: NrRequestActionCodes
   request_jurisdiction_cd: string
   requestExaminationOrProvideConsent: RequestOrConsentIF
+  search: {
+    business: BusinessSearchIF
+    companyType: CompanyTypes
+    jurisdiction: any
+    request: RequestActionsI
+  }
   showActualInput: boolean
   stats: StatsI
   submissionTabNumber: number
diff --git a/src/mixins/index.ts b/src/mixins/index.ts
index ec37181d9..01c1a8e34 100644
--- a/src/mixins/index.ts
+++ b/src/mixins/index.ts
@@ -6,4 +6,5 @@ export * from './date-mixin'
 export * from './displayed-component-mixin'
 export * from './load-keycloak-roles-mixin'
 export * from './nr-affiliation-mixin'
+export * from './search-mixin'
 export * from './update-user-mixin'
diff --git a/src/mixins/search-mixin.ts b/src/mixins/search-mixin.ts
new file mode 100644
index 000000000..0c27a81ad
--- /dev/null
+++ b/src/mixins/search-mixin.ts
@@ -0,0 +1,199 @@
+// External imports
+import { Component, Mixins, Watch } from 'vue-property-decorator'
+import { Action, Getter } from 'vuex-class'
+import { SessionStorageKeys } from 'sbc-common-components/src/util/constants'
+
+// Interfaces / enums / etc.
+import { BusinessSearchIF, ConversionTypesI, EntityI, RequestActionsI } from '@/interfaces'
+import { ActionBindingIF } from '@/interfaces/store-interfaces'
+import { AccountType, CompanyTypes, CorpTypeCd, EntityTypes, Location, NrRequestActionCodes,
+  NrRequestTypeCodes } from '@/enums'
+import { BcMapping, ConversionTypes, RequestActions, XproMapping } from '@/list-data'
+import { CommonMixin } from './common-mixin'
+
+/**
+ * Mixin to provide common/shared imports/methods to search components.
+ */
+@Component({})
+export class SearchMixin extends Mixins(CommonMixin) {
+  // Enums for template
+  readonly CompanyTypes = CompanyTypes
+  readonly EntityTypes = EntityTypes
+  readonly NrRequestActionCodes = NrRequestActionCodes
+  readonly RequestActions = RequestActions
+
+  // Store getters
+  @Getter getConversionType!: NrRequestTypeCodes
+  @Getter getConversionTypeOptions!: ConversionTypesI[]
+  @Getter getDesignation!: string
+  @Getter getDisplayedComponent!: string
+  @Getter getEntityBlurbs!: Array<EntityI | ConversionTypesI>
+  @Getter getEntityTypeCd!: EntityTypes
+  @Getter getEntityTypeOptions!: Array<EntityI>
+  @Getter getErrors!: string[]
+  @Getter getHasNoCorpNum!: boolean
+  @Getter getLocation!: Location
+  @Getter getOriginEntityTypeCd!: EntityTypes
+  @Getter getRequestActionCd!: NrRequestActionCodes
+  @Getter getSearchBusiness!: BusinessSearchIF
+  @Getter getSearchCompanyType!: CompanyTypes
+  @Getter getSearchJurisdiction!: any
+  @Getter getSearchRequest!: RequestActionsI
+  @Getter isAmalgamation!: boolean
+  @Getter isAssumed!: boolean
+  @Getter isAuthenticated!: boolean
+  @Getter isCanadian!: boolean
+  @Getter isChangeName!: boolean
+  @Getter isContinuationIn!: boolean
+  @Getter isConversion!: boolean
+  @Getter isFederal!: boolean
+  @Getter isMobile!: boolean
+  @Getter isMrasJurisdiction!: boolean
+  @Getter isNewBusiness!: boolean
+  @Getter isNumberedEntityType!: boolean
+  @Getter isRestoration!: boolean
+  @Getter isXproFlow!: boolean
+
+  // Store actions
+  @Action setClearErrors!: () => void
+  @Action setConversionType!: ActionBindingIF
+  @Action setCorpNum!: ActionBindingIF
+  @Action setCorpSearch!: ActionBindingIF
+  @Action setDesignation!: ActionBindingIF
+  @Action setDoNameCheck!: ActionBindingIF
+  @Action setEntityTypeCd!: ActionBindingIF
+  @Action setExtendedRequestType!: ActionBindingIF
+  @Action setJurisdictionCd!: ActionBindingIF
+  @Action setLocation!: ActionBindingIF
+  @Action setName!: ActionBindingIF
+  @Action setNoCorpNum!: ActionBindingIF
+  @Action setOriginEntityTypeCd!: ActionBindingIF
+  @Action setPickEntityModalVisible!: ActionBindingIF
+  @Action setRequestAction!: ActionBindingIF
+  @Action setSearchBusiness!: ActionBindingIF
+  @Action setSearchCompanyType!: ActionBindingIF
+  @Action setSearchJurisdiction!: ActionBindingIF
+  @Action setSearchRequest!: ActionBindingIF
+  @Action startAnalyzeName!: ActionBindingIF
+
+  get isScreenLg () {
+    return this.$vuetify.breakpoint.lgAndUp
+  }
+
+  /** Whether current account type is Premium, SBC Staff or Staff. */
+  get isPremiumOrStaff (): boolean {
+    return [AccountType.PREMIUM, AccountType.SBC_STAFF, AccountType.STAFF]
+      .includes(JSON.parse(sessionStorage.getItem(SessionStorageKeys.CurrentAccount))?.accountType)
+  }
+
+  get isBenBusiness (): boolean {
+    const corpType = this.getSearchBusiness?.legalType as unknown as CorpTypeCd
+    return (corpType === CorpTypeCd.BENEFIT_COMPANY)
+  }
+
+  get isNewBcBusiness (): boolean {
+    return (this.getRequestActionCd === NrRequestActionCodes.NEW_BUSINESS && this.getSearchRequest?.group === 0)
+  }
+
+  get isNewXproBusiness (): boolean {
+    return (this.getRequestActionCd === NrRequestActionCodes.NEW_BUSINESS && this.getSearchRequest?.group === 1)
+  }
+
+  get isAlterable (): boolean {
+    const corpType = this.getSearchBusiness.legalType as unknown as CorpTypeCd
+    return (
+      corpType === CorpTypeCd.BC_COMPANY ||
+      corpType === CorpTypeCd.BENEFIT_COMPANY ||
+      corpType === CorpTypeCd.BC_ULC_COMPANY
+    )
+  }
+
+  get entity_type_cd (): EntityTypes {
+    return this.getEntityTypeCd
+  }
+
+  set entity_type_cd (type: EntityTypes) {
+    // special case for sub-menu
+    if (type === EntityTypes.INFO) {
+      // set empty value until user chooses a new one
+      // (don't use null in case it's already null as we want reactivity)
+      this.setEntityTypeCd('')
+      // show the "View all business types" modal
+      this.setPickEntityModalVisible(true)
+      return
+    }
+
+    // special case for conversion
+    if (this.getEntityTypeCd && this.isConversion && type) {
+      const value = type as unknown as NrRequestTypeCodes
+      const entity_type_cd = ConversionTypes.find(conv => conv.value === value)?.entity_type_cd || null
+      this.setEntityTypeCd(entity_type_cd)
+      this.setConversionType(type)
+      this.setConversionType(type)
+      return
+    }
+
+    this.setEntityTypeCd(type)
+  }
+
+  /** Whether selected radio button is Named Company. */
+  get isNamedCompany (): boolean {
+    return (this.getSearchCompanyType === CompanyTypes.NAMED_COMPANY)
+  }
+
+  /** Whether selected radio button is Numbered Company. */
+  get isNumberedCompany (): boolean {
+    return (this.getSearchCompanyType === CompanyTypes.NUMBERED_COMPANY)
+  }
+
+  get isChangeNameXpro (): boolean {
+    return XproMapping.CHG.includes(this.getSearchBusiness?.legalType)
+  }
+
+  /** Whether the selected XPRO is restorable. */
+  get isSelectedXproAndRestorable (): boolean {
+    return XproMapping.REH.includes(this.getSearchBusiness?.legalType)
+  }
+
+  /** Whether the selected business' legal type is BC and restorable. */
+  get isBcRestorable (): boolean {
+    const corpType = this.getSearchBusiness?.legalType as unknown as CorpTypeCd
+    return BcMapping.REH.includes(this.corpTypeToEntityType(corpType))
+  }
+
+  /** Whether company is restorable. */
+  get isRestorable (): boolean {
+    return (this.isSelectedXproAndRestorable || this.isBcRestorable)
+  }
+
+  get isSelectedCompanyXPro (): boolean {
+    if (this.isRestoration) {
+      return this.isSelectedXproAndRestorable
+    }
+    if (this.isChangeName) {
+      return this.isChangeNameXpro
+    }
+    return false
+  }
+
+  /** Whether business is a BEN/BC/CC/ULC according to its legal type. */
+  get isBcBenCccUlc (): boolean {
+    return (
+      this.getSearchBusiness?.legalType === EntityTypes.BC ||
+      this.getSearchBusiness?.legalType === EntityTypes.BEN ||
+      this.getSearchBusiness?.legalType === EntityTypes.CC ||
+      this.getSearchBusiness?.legalType === EntityTypes.ULC
+    )
+  }
+
+  /** Resets search values when location changes. */
+  @Watch('getLocation')
+  private watchLocation (newVal: Location) {
+    // if they need to search by corp num first then reset the name
+    if ([Location.CA, Location.FD, Location.IN, Location.US].includes(newVal)) {
+      this.setName('')
+    }
+    this.setCorpSearch('')
+    this.setNoCorpNum(false)
+  }
+}
diff --git a/src/store/actions.ts b/src/store/actions.ts
index 1e00fd673..0b6267d14 100644
--- a/src/store/actions.ts
+++ b/src/store/actions.ts
@@ -1,6 +1,7 @@
 import querystring from 'qs'
 import axios from 'axios'
 import {
+  CompanyTypes,
   EntityStates,
   EntityTypes,
   Location,
@@ -35,6 +36,7 @@ import {
   QuickSearchParamsI,
   QuickSearchParsedRespI,
   RefundParamsIF,
+  RequestActionsI,
   RestrictedResponseIF,
   SelectOptionsI,
   StatsI,
@@ -1238,3 +1240,19 @@ export const setRefundParams = ({ commit }, refundParams: RefundParamsIF): void
 export const setIncorporateNowErrorStatus = ({ commit }, incorporateNowError: boolean): void => {
   commit('mutateIncorporateNowErrorStatus', incorporateNowError)
 }
+
+export const setSearchBusiness = ({ commit }, val: BusinessSearchIF): void => {
+  commit('mutateSearchBusiness', val)
+}
+
+export const setSearchCompanyType = ({ commit }, val: CompanyTypes): void => {
+  commit('mutateSearchCompanyType', val)
+}
+
+export const setSearchJurisdiction = ({ commit }, val: any): void => {
+  commit('mutateSearchJurisdiction', val)
+}
+
+export const setSearchRequest = ({ commit }, val: RequestActionsI): void => {
+  commit('mutateSearchRequest', val)
+}
diff --git a/src/store/getters.ts b/src/store/getters.ts
index 80b5be7c0..edd1c3ad4 100644
--- a/src/store/getters.ts
+++ b/src/store/getters.ts
@@ -2,6 +2,7 @@ import { getVuetify } from '@/plugins'
 import {
   AnalysisJSONI,
   ApplicantI,
+  BusinessSearchIF,
   ConditionalInstructionI,
   ConditionalReqI,
   ConsentConflictI,
@@ -27,6 +28,7 @@ import {
   SubmissionTypeT
 } from '@/interfaces'
 import {
+  CompanyTypes,
   EntityTypes,
   Location,
   NrAffiliationErrors,
@@ -1235,3 +1237,19 @@ export const isMrasJurisdiction = (state: StateIF): boolean => {
   const xproJurisdiction = getJurisdictionText(state)
   return MrasJurisdictions.includes(xproJurisdiction?.toLowerCase())
 }
+
+export const getSearchBusiness = (state: StateIF): BusinessSearchIF => {
+  return state.stateModel.newRequestModel.search.business
+}
+
+export const getSearchCompanyType = (state: StateIF): CompanyTypes => {
+  return state.stateModel.newRequestModel.search.companyType
+}
+
+export const getSearchJurisdiction = (state: StateIF): any => {
+  return state.stateModel.newRequestModel.search.jurisdiction
+}
+
+export const getSearchRequest = (state: StateIF): RequestActionsI => {
+  return state.stateModel.newRequestModel.search.request
+}
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index 5ae0fc55c..b5c392103 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import {
   AnalysisJSONI,
+  BusinessSearchIF,
   ConditionalInstructionI,
   ConversionTypesI,
   NameRequestI,
   RefundParamsIF,
+  RequestActionsI,
   SelectOptionsI,
   StaffPaymentIF,
   StateIF,
@@ -13,13 +15,14 @@ import {
   WaitingAddressSearchI
 } from '@/interfaces'
 import {
+  CompanyTypes,
   EntityTypes,
   Location,
   NameCheckErrorType,
   NrAffiliationErrors,
-  PriorityCode,
   NrRequestActionCodes,
-  NrRequestTypeCodes
+  NrRequestTypeCodes,
+  PriorityCode
 } from '@/enums'
 
 export const clearErrors = (state: StateIF) => {
@@ -564,3 +567,19 @@ export const mutateHotjarUserId = (state: StateIF, hotjarUserId: string) => {
 export const mutateIncorporateNowErrorStatus = (state: StateIF, incorporateNowError: boolean) => {
   state.stateModel.newRequestModel.incorporateNowError = incorporateNowError
 }
+
+export const mutateSearchBusiness = (state: StateIF, val: BusinessSearchIF) => {
+  state.stateModel.newRequestModel.search.business = val
+}
+
+export const mutateSearchCompanyType = (state: StateIF, val: CompanyTypes) => {
+  state.stateModel.newRequestModel.search.companyType = val
+}
+
+export const mutateSearchJurisdiction = (state: StateIF, val: any) => {
+  state.stateModel.newRequestModel.search.jurisdiction = val
+}
+
+export const mutateSearchRequest = (state: StateIF, val: RequestActionsI) => {
+  state.stateModel.newRequestModel.search.request = val
+}
diff --git a/src/store/state.ts b/src/store/state.ts
index d2469c602..13207293f 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -140,6 +140,12 @@ export const stateModel: StateModelIF = {
         assumed_name: false
       }
     },
+    search: {
+      business: null,
+      companyType: null,
+      jurisdiction: null,
+      request: null
+    },
     showActualInput: false,
     stats: null,
     submissionTabNumber: 0,
diff --git a/src/views/landing.vue b/src/views/landing.vue
index f74f24a14..9c57d3449 100644
--- a/src/views/landing.vue
+++ b/src/views/landing.vue
@@ -16,6 +16,12 @@
             </keep-alive>
           </transition>
         </div>
+
+        <!-- FOR DEBUGGING -->
+        <div>getRequestActionCd={{ getRequestActionCd }}</div>
+        <div>getLocation={{ getLocation }}</div>
+        <div>getEntityTypeCd={{ getEntityTypeCd }}</div>
+        <div>isMrasJurisdiction={{ isMrasJurisdiction }}</div>
       </v-container>
     </v-row>
 
@@ -63,6 +69,12 @@ export default class Landing extends Vue {
   // Global getter
   @Getter getDisplayedComponent!: string
 
+  // FOR DEBUGGING:
+  @Getter getEntityTypeCd!: any
+  @Getter getLocation!: any
+  @Getter getRequestActionCd!: any
+  @Getter isMrasJurisdiction!: boolean
+
   // Global actions
   @Action loadExistingNameRequest!: ActionBindingIF
   @Action setDisplayedComponent!: ActionBindingIF
diff --git a/tests/unit/name-input.spec.ts b/tests/unit/name-input.spec.ts
index 3660240e2..c7766d594 100644
--- a/tests/unit/name-input.spec.ts
+++ b/tests/unit/name-input.spec.ts
@@ -29,7 +29,7 @@ describe('NameInput component', () => {
   // })
 
   // it('Displays the required ui elements', () => {
-  //   expect(wrapper.find('#name-input-text-field').element).toBeTruthy()
+  //   expect(wrapper.find('#name-input-component').element).toBeTruthy()
   //   expect(wrapper.find('#name-input-icon').element).toBeTruthy()
   // })
   // it('Resists submitting when the entity type is set to "INFO" and detects the correct error type', async () => {
diff --git a/tests/unit/search.spec.ts b/tests/unit/search.spec.ts
index 5172fa481..0275865af 100644
--- a/tests/unit/search.spec.ts
+++ b/tests/unit/search.spec.ts
@@ -68,7 +68,7 @@ describe('Select Company Type block', () => {
   //   const wrapper = wrapperFactory()
   //   await wrapper.find('#named-company-radio').setChecked()
 
-  //   expect(wrapper.vm.selectedCompanyType).toBe('namedCompany')
+  //   expect(wrapper.vm.getSearchCompanyType).toBe('namedCompany')
   //   wrapper.destroy()
   // })
 })

From 664d3b41ff2f2a0e5b1ab26a4d1872336fdc7811 Mon Sep 17 00:00:00 2001
From: Severin Beauvais <severin.beauvais@gmail.com>
Date: Wed, 13 Sep 2023 10:54:39 -0700
Subject: [PATCH 2/2] - moved button logic from template into getters

---
 src/components/new-request/search.vue | 116 ++++++++++++++------------
 1 file changed, 62 insertions(+), 54 deletions(-)

diff --git a/src/components/new-request/search.vue b/src/components/new-request/search.vue
index 7f4dc58e6..6947a86c4 100644
--- a/src/components/new-request/search.vue
+++ b/src/components/new-request/search.vue
@@ -79,7 +79,7 @@
 
     <!-- Xpro/Federal bullets -->
     <!-- *** TODO: move this into flows above -->
-    <!-- *** TODO: simply this button's logic -->
+    <!-- *** TODO: simplify this button's logic -->
     <template v-if="entity_type_cd || isFederal || isRestorable">
       <v-row v-if="isNamedCompany || isAmalgamation">
         <XproFederalBullets v-if="isXproFlow && isFederal" cols="12" />
@@ -88,7 +88,7 @@
 
     <!-- Corporate Number checkbox, only for Canadian MRAS jurisdictions -->
     <!-- *** TODO: move this into flows above -->
-    <!-- *** TODO: simply this button's logic -->
+    <!-- *** TODO: simplify this button's logic -->
     <template v-if="entity_type_cd || isFederal || isRestorable">
       <v-row v-if="isNamedCompany || isAmalgamation">
         <v-col cols="12" class="d-flex justify-end">
@@ -97,30 +97,23 @@
       </v-row>
     </template>
 
-    <!-- Go to COLIN / Incorporate Now buttons -->
-    <!-- *** TODO: keep this as common code at bottom of template -->
-    <!-- *** TODO: simply this button's logic -->
-    <template v-if="entity_type_cd || isFederal || isRestorable">
-      <v-row v-if="isNumberedCompany || isFederal">
-        <v-col v-if = "!isConversion || isAlterOnline(getConversionType)" cols="12"
-          class="d-flex justify-center"
-        >
-          <v-btn
-            v-if="showColinButton"
-            class="px-9"
-            id="go-to-colin-button"
-            :href="colinLink"
-            target="_blank"
-          >
+    <!-- Go to COLIN button -->
+    <template v-if="showColinButton">
+      <v-row justify="center" class="mt-6">
+        <v-col cols="auto">
+          <v-btn id="go-to-colin-button" class="px-9" :href="colinLink" target="_blank">
             Go to Corporate Online to {{ isConversion ? 'Alter' : 'Register' }}
             <v-icon small class="ml-1">mdi-open-in-new</v-icon>
           </v-btn>
-          <v-btn
-            v-else-if="showActionButton"
-            class="px-9"
-            id="incorporate-now-button"
-            @click="actionNowClicked()"
-          >
+        </v-col>
+      </v-row>
+    </template>
+
+    <!-- Incorporate Now button -->
+    <template v-if="showActionButton">
+      <v-row justify="center" class="mt-6">
+        <v-col cols="auto">
+          <v-btn id="incorporate-now-button" class="px-9" @click="actionNowClicked()">
             {{ actionNowButtonText }}
           </v-btn>
         </v-col>
@@ -128,7 +121,6 @@
     </template>
 
     <!-- Check This Name button -->
-    <!-- *** TODO: keep this as common code at bottom of template -->
     <template v-if="isShowCheckNameButton">
       <v-row justify="center" class="mt-6">
         <v-col cols="auto">
@@ -259,41 +251,57 @@ export default class Search extends Mixins(CommonMixin, NrAffiliationMixin, Sear
   }
 
   get showActionButton (): boolean {
-    // Since Federal Reinstatement is a paper filing, we don't show any buttons.
-    // The same conditional is in showColinButton().
-    if (this.isFederal && this.isRestoration) return false
-    if (this.isConversion && !this.isAlterOnline(this.getConversionType)) return false
-    return true
+    // FUTURE: simplify this logic
+    if (this.entity_type_cd || this.isFederal || this.isRestorable) {
+      if (this.isNumberedCompany || this.isFederal) {
+        if (!this.isConversion || this.isAlterOnline(this.getConversionType)) {
+          // Since Federal Reinstatement is a paper filing, we don't show any buttons.
+          // The same conditional is in showColinButton().
+          if (this.isFederal && this.isRestoration) return false
+          if (this.isConversion && !this.isAlterOnline(this.getConversionType)) return false
+          return true
+        }
+      }
+    }
+    return false
   }
 
   /** Whether to show "Go to COLIN" button (otherwise will show `actionNowButtonText` button). */
   get showColinButton (): boolean {
-    if (this.showContinueInButton) return true
-    if (this.isFederal && this.isRestoration) return false
-    if (this.isFederal) return true
-
-    // don't show COLIN button for supported alteration entities
-    if (this.isConversion) {
-      return !this.isSupportedAlteration(this.getConversionType)
-    }
-
-    // don't show COLIN button for supported restoration entities
-    if (this.isRestoration) {
-      const supportedRestorationEntites = GetFeatureFlag('supported-restoration-entities')
-      const isRestorationEntity = supportedRestorationEntites.includes(this.entity_type_cd)
-      return !isRestorationEntity
-    }
-
-    if (this.isChangeName) {
-      const supportedChnageNameEntites = GetFeatureFlag('supported-name-change-entities')
-      const isChangeNameEntity = supportedChnageNameEntites.includes(this.entity_type_cd)
-      return !isChangeNameEntity
+    // FUTURE: simplify this logic
+    if (this.entity_type_cd || this.isFederal || this.isRestorable) {
+      if (this.isNumberedCompany || this.isFederal) {
+        if (!this.isConversion || this.isAlterOnline(this.getConversionType)) {
+          if (this.showContinueInButton) return true
+          if (this.isFederal && this.isRestoration) return false
+          if (this.isFederal) return true
+
+          // don't show COLIN button for supported alteration entities
+          if (this.isConversion) {
+            return !this.isSupportedAlteration(this.getConversionType)
+          }
+
+          // don't show COLIN button for supported restoration entities
+          if (this.isRestoration) {
+            const supportedRestorationEntites = GetFeatureFlag('supported-restoration-entities')
+            const isRestorationEntity = supportedRestorationEntites.includes(this.entity_type_cd)
+            return !isRestorationEntity
+          }
+
+          if (this.isChangeName) {
+            const supportedChnageNameEntites = GetFeatureFlag('supported-name-change-entities')
+            const isChangeNameEntity = supportedChnageNameEntites.includes(this.entity_type_cd)
+            return !isChangeNameEntity
+          }
+
+          // don't show COLIN button for supported entities
+          const supportedEntites = GetFeatureFlag('supported-incorporation-registration-entities')
+          const isIncorporateEntity = supportedEntites.includes(this.entity_type_cd)
+          return !isIncorporateEntity
+        }
+      }
     }
-
-    // don't show COLIN button for supported entities
-    const supportedEntites = GetFeatureFlag('supported-incorporation-registration-entities')
-    const isIncorporateEntity = supportedEntites.includes(this.entity_type_cd)
-    return !isIncorporateEntity
+    return false
   }
 
   get showContinueInButton (): boolean {