From 3f33d90586c9b940693a616672180a48d19a0fc8 Mon Sep 17 00:00:00 2001
From: CameronFreshworks <53542131+cameron-freshworks@users.noreply.github.com>
Date: Mon, 23 Aug 2021 13:18:50 -0700
Subject: [PATCH] 8572 Old Manage business dashboard updates (#1746)

* Initial Commit

* Added Feature Flag

* Clean up

* Updated Flag parsing

* Updated for Multiple names
---
 auth-web/src/assets/scss/theme.scss           |   1 +
 .../manage-business/AddNameRequestForm.vue    |  30 +--
 .../manage-business/AffiliatedEntityList.vue  | 210 +++++++++++++++---
 .../auth/manage-business/EntityManagement.vue |   1 +
 auth-web/src/models/business.ts               |  21 +-
 auth-web/src/services/business.services.ts    |   4 +
 auth-web/src/store/modules/business.ts        |  47 +++-
 auth-web/src/util/config-helper.ts            |   8 +
 auth-web/src/util/constants.ts                |   8 +-
 9 files changed, 266 insertions(+), 64 deletions(-)

diff --git a/auth-web/src/assets/scss/theme.scss b/auth-web/src/assets/scss/theme.scss
index b479748b5a..db821ab92a 100644
--- a/auth-web/src/assets/scss/theme.scss
+++ b/auth-web/src/assets/scss/theme.scss
@@ -66,3 +66,4 @@ $BCgovFontColorInverted: #ffffff;
 // App Colors
 $app-blue: #1669bb; // same as the Vuetify theme primary
 $app-lt-blue: #01336626; // LOW OPACITY PRIMARY BLUE
+$app-background-blue: #E4EDF7 // Hover Background Blue
diff --git a/auth-web/src/components/auth/manage-business/AddNameRequestForm.vue b/auth-web/src/components/auth/manage-business/AddNameRequestForm.vue
index 906ddafdcf..1872ef99a0 100644
--- a/auth-web/src/components/auth/manage-business/AddNameRequestForm.vue
+++ b/auth-web/src/components/auth/manage-business/AddNameRequestForm.vue
@@ -156,32 +156,10 @@ export default class AddNameRequestForm extends Vue {
           email: this.applicantEmail
         })
         if (nrResponse?.status === 201) {
-          // update the legal api if the status is success
-          const filingBody: BusinessRequest = {
-            filing: {
-              header: {
-                name: FilingTypes.INCORPORATION_APPLICATION,
-                accountId: this.currentOrganization.id
-              },
-              business: {
-                legalType: LegalTypes.BCOMP
-              },
-              incorporationApplication: {
-                nameRequest: {
-                  legalType: LegalTypes.BCOMP,
-                  nrNumber: this.nrNumber
-                }
-              }
-            }
-          }
-
-          const filingResponse = await this.createNamedBusiness(filingBody)
-          if (filingResponse?.errorMsg) {
-            this.$emit('add-unknown-error')
-          } else {
-            // emit event to let parent know business added
-            this.$emit('add-success')
-          }
+          // emit event to let parent know business added
+          this.$emit('add-success')
+        } else {
+          this.$emit('add-unknown-error')
         }
       } catch (exception) {
         if (exception.response?.status === StatusCodes.BAD_REQUEST) {
diff --git a/auth-web/src/components/auth/manage-business/AffiliatedEntityList.vue b/auth-web/src/components/auth/manage-business/AffiliatedEntityList.vue
index cda33bfae3..3228805efc 100644
--- a/auth-web/src/components/auth/manage-business/AffiliatedEntityList.vue
+++ b/auth-web/src/components/auth/manage-business/AffiliatedEntityList.vue
@@ -29,15 +29,73 @@
             <div class="meta">
               <v-list-item-title v-if="isNumberedIncorporationApplication(item)">Numbered Benefit Company</v-list-item-title>
               <v-list-item-title v-if="!isNumberedIncorporationApplication(item)">{{ item.name }}</v-list-item-title>
+              <v-list-item-title v-if="!item.name && isNameRequest(item.corpType.code)">{{ getApprovedName(item) }}</v-list-item-title>
               <v-list-item-subtitle v-if="isIncorporationNumber(item.corpType.code)">Incorporation Number: {{ item.businessIdentifier }}</v-list-item-subtitle>
               <v-list-item-subtitle v-if="isNameRequest(item.corpType.code)">Name Request ({{ item.businessIdentifier }})</v-list-item-subtitle>
               <v-list-item-subtitle v-if="isTemporaryBusinessRegistration(item.corpType.code)">Incorporation Application</v-list-item-subtitle>
             </div>
           </template>
-          <template v-slot:[`item.action`]="{ item }">
+
+          <!-- Actions -->
+          <template v-slot:[`item.action`]="{ item, index }">
             <div class="actions">
-              <v-btn small color="primary" @click="goToDashboard(item)" title="Go to Business Dashboard" data-test="goto-dashboard-button">Open</v-btn>
-              <v-btn v-can:REMOVE_BUSINESS.disable small depressed @click="removeBusiness(item)" title="Remove Business" data-test="remove-button">Remove</v-btn>
+              <span class="open-action">
+                <v-btn
+                    small
+                    color="primary"
+                    min-width="5rem"
+                    min-height="2rem"
+                    class="open-action-btn"
+                    data-test="open-action-button"
+                    @click="open(item)"
+                >
+                  Open
+                </v-btn>
+              </span>
+
+              <!-- More Actions Menu -->
+              <span class="more-actions mr-4">
+                <v-menu
+                    offset-y left nudge-bottom="4"
+                    v-model="index"
+                >
+                  <template v-slot:activator="{ on }">
+                    <v-btn
+                        small
+                        color="primary"
+                        min-height="2rem"
+                        class="more-actions-btn"
+                        v-on="on"
+                    >
+                      <v-icon>{{index ? 'mdi-menu-up' : 'mdi-menu-down'}}</v-icon>
+                    </v-btn>
+                  </template>
+                  <v-list>
+                    <v-list-item
+                        v-if="isApprovedForIA(item)"
+                        class="actions-dropdown_item"
+                        data-test="use-name-request-button"
+                        @click="createDraftGoToDashboard(item)"
+                    >
+                      <v-list-item-subtitle>
+                        <v-icon small>mdi-file-certificate-outline</v-icon>
+                        <span class="pl-1">Use this Name Request</span>
+                      </v-list-item-subtitle>
+                    </v-list-item>
+                    <v-list-item
+                        class="actions-dropdown_item"
+                        data-test="remove-button"
+                        v-can:REMOVE_BUSINESS.disable
+                        @click="removeBusiness(item)"
+                    >
+                      <v-list-item-subtitle>
+                        <v-icon small>mdi-delete</v-icon>
+                        <span class="pl-1">Remove</span>
+                      </v-list-item-subtitle>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </span>
             </div>
           </template>
         </v-data-table>
@@ -47,12 +105,13 @@
 </template>
 
 <script lang="ts">
-import { Business, BusinessRequest } from '@/models/business'
+import { Business, BusinessRequest, NameRequest } from '@/models/business'
 import { Component, Emit, Vue } from 'vue-property-decorator'
-import { CorpType, FilingTypes, LegalTypes, SessionStorageKeys } from '@/util/constants'
+import { CorpType, FilingTypes, LDFlags, LegalTypes, NrState, SessionStorageKeys } from '@/util/constants'
 import { Member, MembershipStatus, MembershipType, Organization, RemoveBusinessPayload } from '@/models/Organization'
 import { mapActions, mapMutations, mapState } from 'vuex'
 import ConfigHelper from '@/util/config-helper'
+import LaunchDarklyService from 'sbc-common-components/src/services/launchdarkly.services'
 import OrgModule from '@/store/modules/org'
 import TeamManagement from '@/components/auth/account-settings/team-management/TeamManagement.vue'
 import { getModule } from 'vuex-module-decorators'
@@ -111,13 +170,34 @@ export default class AffiliatedEntityList extends Vue {
     return corpType === CorpType.NAME_REQUEST
   }
 
+  private isApprovedForIA (business: Business): boolean {
+    // Split string tokens into an array to avoid false string matching
+    const supportedEntityFlags = LaunchDarklyService.getFlag(LDFlags.IaSupportedEntities)?.split(' ')
+
+    return this.isNameRequest(business.corpType.code) &&
+      business.nameRequest?.state === NrState.APPROVED &&
+        supportedEntityFlags?.includes(business.nameRequest?.legalType)
+  }
+
   private isTemporaryBusinessRegistration (corpType: string): boolean {
     return corpType === CorpType.NEW_BUSINESS
   }
+
   private isNumberedIncorporationApplication (item: Business): boolean {
     return item.corpType.code === CorpType.NEW_BUSINESS && item.name === item.businessIdentifier
   }
 
+  private getApprovedName (item: Business): any {
+    const approvedName = item => {
+      for (const nameItem of item.nameRequest?.names) {
+        if (nameItem.state === NrState.APPROVED) {
+          return nameItem.name
+        }
+      }
+    }
+    return approvedName(item) || item.nameRequest.names[0].name // Return first name if DRAFT (None Approved)
+  }
+
   private customSort (items, index, isDescending) {
     const isDesc = isDescending.length > 0 && isDescending[0]
     if (index[0] === 'info') {
@@ -152,45 +232,71 @@ export default class AffiliatedEntityList extends Vue {
     this.$router.push({ path: '/businessprofile', query: { redirect: `/account/${this.currentOrganization.id}` } })
   }
 
-  async goToDashboard (business: Business) {
+  private open (business: Business): void {
+    if (business.corpType.code === CorpType.NAME_REQUEST) {
+      this.goToNameRequest(business.nameRequest)
+    } else {
+      this.goToDashboard(business.businessIdentifier)
+    }
+  }
+
+  private manageTeam (business: Business) {
+    this.setCurrentBusiness(business)
+    // Not ideal, as this makes the component less reusable
+    // TODO: Come up with a better solution: global event bus?
+    this.$parent.$emit('change-to', TeamManagement)
+  }
+
+  async createDraftGoToDashboard (business: Business) {
     let businessIdentifier = business.businessIdentifier
     // 3806 : Create new IA if the selected item is Name Request
     // If the business is NR, indicates there is no temporary business. Create a new IA for this NR and navigate.
-    if (business.corpType.code === CorpType.NAME_REQUEST) {
+    if (business.corpType.code === CorpType.NAME_REQUEST && business.nameRequest.state === NrState.APPROVED) {
       this.isLoading = true
-      const filingBody: BusinessRequest = {
-        filing: {
-          header: {
-            name: FilingTypes.INCORPORATION_APPLICATION,
-            accountId: this.currentOrganization.id
-          },
-          business: {
-            legalType: LegalTypes.BCOMP
-          },
-          incorporationApplication: {
-            nameRequest: {
-              legalType: LegalTypes.BCOMP,
-              nrNumber: business.businessIdentifier
-            }
-          }
-        }
-      }
-      const filingResponse = await this.createNamedBusiness(filingBody)
-      this.isLoading = false
       // Find business with name as the NR number and use it for redirection
-      businessIdentifier = filingResponse.data.filing.business.identifier
+      businessIdentifier = await this.createBusinessRecord(business)
+      this.isLoading = false
     }
+    this.goToDashboard(businessIdentifier)
+  }
+
+  private goToDashboard (businessIdentifier: string): void {
     ConfigHelper.addToSession(SessionStorageKeys.BusinessIdentifierKey, businessIdentifier)
     let redirectURL = `${ConfigHelper.getBusinessURL()}${businessIdentifier}`
 
     window.location.href = decodeURIComponent(redirectURL)
   }
 
-  private manageTeam (business: Business) {
-    this.setCurrentBusiness(business)
-    // Not ideal, as this makes the component less reusable
-    // TODO: Come up with a better solution: global event bus?
-    this.$parent.$emit('change-to', TeamManagement)
+  private goToNameRequest (nameRequest: NameRequest): void {
+    ConfigHelper.setNrCredentials(nameRequest)
+    window.location.href = `${ConfigHelper.getNameRequestUrl()}nr/${nameRequest.id}`
+  }
+
+  private async createBusinessRecord (business: Business): Promise<string> {
+    const filingBody: BusinessRequest = {
+      filing: {
+        header: {
+          name: FilingTypes.INCORPORATION_APPLICATION,
+          accountId: this.currentOrganization.id
+        },
+        business: {
+          legalType: business.nameRequest.legalType
+        },
+        incorporationApplication: {
+          nameRequest: {
+            legalType: business.nameRequest.legalType,
+            nrNumber: business.businessIdentifier
+          }
+        }
+      }
+    }
+    const filingResponse = await this.createNamedBusiness(filingBody)
+
+    if (filingResponse?.errorMsg) {
+      this.$emit('add-unknown-error')
+    } else {
+      return filingResponse.data.filing.business.identifier
+    }
   }
 }
 </script>
@@ -215,11 +321,29 @@ export default class AffiliatedEntityList extends Vue {
 }
 
 .actions {
+  .open-action {
+    border-right: 1px solid $gray1;
+  }
+
+  .open-action-btn {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .more-actions-btn {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
   .v-btn + .v-btn {
-    margin-left: 0.4rem;
+    margin-left: 0.5rem;
   }
 }
 
+.actions-dropdown_item:hover {
+  background-color: $app-background-blue;
+}
+
 dd,
 dt {
   float: left;
@@ -264,4 +388,24 @@ dd {
     padding-bottom: 0.75rem;
   }
 }
+
+// Vuetify Overrides
+::v-deep .v-list-item {
+  min-height: 2rem !important;
+
+  :hover {
+    cursor: pointer;
+  }
+}
+
+::v-deep .theme--light.v-data-table thead tr:last-child th:last-child span {
+  padding-right: 85px;
+}
+
+::v-deep .theme--light.v-list-item .v-list-item__action-text, .theme--light.v-list-item .v-list-item__subtitle {
+  color: $app-blue;
+  .v-icon.v-icon {
+    color: $app-blue;
+  }
+}
 </style>
diff --git a/auth-web/src/components/auth/manage-business/EntityManagement.vue b/auth-web/src/components/auth/manage-business/EntityManagement.vue
index 29cc800061..2e27d1d181 100644
--- a/auth-web/src/components/auth/manage-business/EntityManagement.vue
+++ b/auth-web/src/components/auth/manage-business/EntityManagement.vue
@@ -91,6 +91,7 @@
         <AffiliatedEntityList
             @add-business="showAddBusinessModal()"
             @remove-business="showPasscodeResetOptionsModal($event)"
+            @add-failed-show-msg="showNRErrorModal"
         />
       </template>
 
diff --git a/auth-web/src/models/business.ts b/auth-web/src/models/business.ts
index 3a6cefc15f..b1a84c7fd7 100644
--- a/auth-web/src/models/business.ts
+++ b/auth-web/src/models/business.ts
@@ -23,7 +23,8 @@ export interface Business {
     name?: string
     contacts?: Contact[]
     corpType: CorpType,
-    folioNumber: string
+    folioNumber: string,
+    nameRequest?: NameRequest
 }
 
 export interface BusinessSearchResultDto {
@@ -48,8 +49,24 @@ export interface UpdateBusinessNamePayload {
 
 // see https://github.com/bcgov/business-schemas/blob/master/src/registry_schemas/schemas/name_request.json
 export interface NameRequest {
+    names?: Array<Names>
+    id?: number,
     legalType: string,
-    nrNumber?: string
+    nrNumber?: string,
+    state?: string,
+    applicantEmail?: string,
+    applicantPhone?: string
+}
+
+// Names interface to match external data provided from lear.
+export interface Names {
+    /* eslint-disable camelcase */
+    decision_text: string,
+    name_type_cd: string,
+    designation: string,
+    name: string,
+    state: string
+    /* eslint-disable camelcase */
 }
 
 export interface BusinessRequest {
diff --git a/auth-web/src/services/business.services.ts b/auth-web/src/services/business.services.ts
index 3a3432eacb..8f0d845d91 100644
--- a/auth-web/src/services/business.services.ts
+++ b/auth-web/src/services/business.services.ts
@@ -51,4 +51,8 @@ export default class BusinessService {
   static async resetBusinessPasscode (passcodeResetLoad: PasscodeResetLoad): Promise<AxiosResponse<any>> {
     return axios.patch(`${ConfigHelper.getAuthAPIUrl()}/entities/${passcodeResetLoad.businessIdentifier}`, { businessIdentifier: passcodeResetLoad.businessIdentifier, passcodeResetEmail: passcodeResetLoad.passcodeResetEmail, resetPasscode: passcodeResetLoad.resetPasscode })
   }
+
+  static async getNrData (nrNumber: string): Promise<AxiosResponse<any>> {
+    return axios.get(`${ConfigHelper.getLegalAPIUrl()}/nameRequests/${nrNumber}`)
+  }
 }
diff --git a/auth-web/src/store/modules/business.ts b/auth-web/src/store/modules/business.ts
index 971541dcb3..5652f9bfef 100644
--- a/auth-web/src/store/modules/business.ts
+++ b/auth-web/src/store/modules/business.ts
@@ -1,6 +1,6 @@
 import { Action, Module, Mutation, VuexModule } from 'vuex-module-decorators'
 import { Business, BusinessRequest, FolioNumberload, LoginPayload, PasscodeResetLoad } from '@/models/business'
-import { CorpType, FilingTypes, LegalTypes, SessionStorageKeys } from '@/util/constants'
+import { CorpType, FilingTypes, LegalTypes, NrState, SessionStorageKeys } from '@/util/constants'
 import { CreateRequestBody as CreateAffiliationRequestBody, CreateNRAffiliationRequestBody } from '@/models/affiliation'
 import { Organization, RemoveBusinessPayload } from '@/models/Organization'
 
@@ -17,6 +17,10 @@ export default class BusinessModule extends VuexModule {
   currentBusiness: Business = undefined
   businesses: Business[] = []
 
+  public get businessAffiliations (): Business[] {
+    return this.businesses
+  }
+
   @Mutation
   public setCurrentBusiness (business: Business) {
     ConfigHelper.addToSession(SessionStorageKeys.BusinessIdentifierKey, business?.businessIdentifier)
@@ -35,8 +39,47 @@ export default class BusinessModule extends VuexModule {
       return []
     }
     const response = await OrgService.getAffiliatiatedEntities(organization.id)
+
     if (response && response.data && response.status === 200) {
-      return response.data.entities
+      // Fetch and populate data for Name Request affiliations
+      const affiliatedEntities = response.data.entities
+      for (const entity of affiliatedEntities) {
+        if (entity.corpType.code === CorpType.NAME_REQUEST) {
+          await BusinessService.getNrData(entity.businessIdentifier)
+            .then(response => {
+              // Keep the approved name in Sync, in the event of changes in Namex
+              const approvedName = () => {
+                for (const nameItem of response.data.names) {
+                  if (nameItem.state === NrState.APPROVED) {
+                    return nameItem.name
+                  }
+                }
+              }
+
+              if (response?.status >= 200 && response?.status < 300) {
+                BusinessService.updateBusinessName({
+                  businessIdentifier: entity.businessIdentifier,
+                  name: approvedName()
+                })
+
+                entity.nameRequest = {
+                  names: response.data.names,
+                  id: response.data.id,
+                  legalType: response.data.legalType,
+                  nrNumber: response.data.nrNum,
+                  state: response.data.state,
+                  applicantEmail: response.data.applicants?.emailAddress,
+                  applicantPhone: response.data.applicants?.phoneNumber
+                }
+              }
+            }).catch(err => {
+              // eslint-disable-next-line no-console
+              console.log(`Error fetching Name Request: ${err}`)
+            })
+        }
+      }
+
+      return affiliatedEntities
     }
   }
 
diff --git a/auth-web/src/util/config-helper.ts b/auth-web/src/util/config-helper.ts
index fb87fea218..8514701753 100644
--- a/auth-web/src/util/config-helper.ts
+++ b/auth-web/src/util/config-helper.ts
@@ -1,6 +1,7 @@
 import { Account, PaymentTypes, SessionStorageKeys } from '@/util/constants'
 
 import Axios from 'axios'
+import { NameRequest } from '@/models/business'
 
 /**
  * the configs are used since process.env doesnt play well when we hae only one build config and multiple deployments..so going for this
@@ -136,4 +137,11 @@ export default class ConfigHelper {
       [Account.UNLINKED_PREMIUM]: [ PaymentTypes.PAD ]
     }
   }
+
+  static async setNrCredentials (nameRequest: NameRequest) {
+    // Set name request applicant info to retrieve on redirect
+    sessionStorage.setItem('BCREG-nrNum', nameRequest.nrNumber)
+    sessionStorage.setItem('BCREG-emailAddress', nameRequest.applicantEmail)
+    sessionStorage.setItem('BCREG-phoneNumber', nameRequest.applicantPhone)
+  }
 }
diff --git a/auth-web/src/util/constants.ts b/auth-web/src/util/constants.ts
index e532e06fbb..7752593211 100644
--- a/auth-web/src/util/constants.ts
+++ b/auth-web/src/util/constants.ts
@@ -128,6 +128,11 @@ export enum CorpType {
     NAME_REQUEST = 'NR'
 }
 
+export enum NrState {
+    APPROVED = 'APPROVED',
+    DRAFT = 'DRAFT',
+}
+
 export enum AccessType {
     REGULAR = 'REGULAR',
     EXTRA_PROVINCIAL = 'EXTRA_PROVINCIAL',
@@ -171,7 +176,8 @@ export enum LDFlags {
     EnableGovmInvite = 'enable-govm-account-invite',
     HideProductPackage = 'hide-product-packages',
     EnableOrgNameAutoComplete = 'enable-org-name-auto-complete',
-    EnableBusinessTable = 'enable-business-table'
+    EnableBusinessTable = 'enable-business-table',
+    IaSupportedEntities = 'ia-supported-entities'
 }
 
 export enum DateFilterCodes {