14946 - Add a new dialog for account missing email and phone (#561)

* add new dialog for account missing email and phone

* 5.4.2

* add error types as enums

* remove extra code

package.json

@@ -1,6 +1,6 @@
 {
   "name": "business-create-ui",
-  "version": "5.4.1",
+  "version": "5.4.2",
   "private": true,
   "appName": "Create UI",
   "sbcName": "SBC Common Components",

src/App.vue

@@ -25,6 +25,12 @@
       @retry="fetchData()"
     />
 
+    <AccountContactMissingDialog
+      attach="#app"
+      :dialog="accountContactMissingDialog"
+      @exit="goToDashboard(true)"
+    />
+
     <InvalidFilingDialog
       attach="#app"
       :dialog="invalidFilingDialog"
@@ -252,7 +258,7 @@ import { DissolutionResources, IncorporationResources, RegistrationResources, Re
 import { AuthServices, LegalServices, PayServices } from '@/services/'
 
 // Enums and Constants
-import { EntityState, FilingCodes, FilingNames, FilingStatus, FilingTypes, NameRequestStates, RouteNames,
+import { EntityState, ErrorTypes, FilingCodes, FilingNames, FilingStatus, FilingTypes, NameRequestStates, RouteNames,
   StaffPaymentOptions } from '@/enums'
 import { SessionStorageKeys } from 'sbc-common-components/src/util/constants'
 
@@ -330,6 +336,7 @@ export default class App extends Mixins(CommonMixin, DateMixin, FilingTemplateMi
 
   // Local properties
   accountAuthorizationDialog = false
+  accountContactMissingDialog = false
   fetchErrorDialog = false
   filingSurveyDialog = false
   invalidFilingDialog = false
@@ -422,6 +429,7 @@ export default class App extends Mixins(CommonMixin, DateMixin, FilingTemplateMi
   get isErrorDialog (): boolean {
     return (
       this.accountAuthorizationDialog ||
+      this.accountContactMissingDialog ||
       this.nameRequestInvalidErrorDialog ||
       this.fetchErrorDialog ||
       this.filingSurveyDialog ||
@@ -692,7 +700,11 @@ export default class App extends Mixins(CommonMixin, DateMixin, FilingTemplateMi
       // get user info
       const userInfo = await this.loadUserInfo().catch(error => {
         console.log('User info error =', error) // eslint-disable-line no-console
-        this.accountAuthorizationDialog = true
+        if ([ErrorTypes.INVALID_USER_EMAIL, ErrorTypes.INVALID_USER_PHONE].includes(error.message)) {
+          this.accountContactMissingDialog = true
+        } else {
+          this.accountAuthorizationDialog = true
+        }
         throw error // go to catch()
       })
 
@@ -966,6 +978,7 @@ export default class App extends Mixins(CommonMixin, DateMixin, FilingTemplateMi
     this.nameRequestInvalidErrorDialog = false
     this.invalidFilingDialog = false
     this.accountAuthorizationDialog = false
+    this.accountContactMissingDialog = false
     this.fetchErrorDialog = false
     this.filingSurveyDialog = false
     this.paymentErrorDialog = false
@@ -996,7 +1009,7 @@ export default class App extends Mixins(CommonMixin, DateMixin, FilingTemplateMi
 
     // NB: will throw if API error
     const userInfo = await AuthServices.fetchUserInfo()
-    if (!userInfo) throw new Error('Invalid user info')
+    if (!userInfo) throw new Error(ErrorTypes.INVALID_USER_INFO)
 
     if (userInfo.contacts?.length > 0 && userInfo.contacts[0].email) {
       // this is a BCSC user
@@ -1005,7 +1018,7 @@ export default class App extends Mixins(CommonMixin, DateMixin, FilingTemplateMi
       // this is an IDIR user
       this.setUserEmail(userInfo.email)
     } else if (userInfo.type !== this.STAFF_ROLE && userInfo.type !== this.GOV_ACCOUNT_USER) {
-      throw new Error('Invalid user email')
+      throw new Error(ErrorTypes.INVALID_USER_EMAIL)
     }
 
     if (userInfo.contacts?.length > 0 && userInfo.contacts[0].phone) {
@@ -1019,8 +1032,8 @@ export default class App extends Mixins(CommonMixin, DateMixin, FilingTemplateMi
       console.info('Invalid user phone') // eslint-disable-line no-console
     }
 
-    if (!userInfo.firstname) throw new Error('Invalid user first name')
-    if (!userInfo.lastname) throw new Error('Invalid user last name')
+    if (!userInfo.firstname) throw new Error(ErrorTypes.INVALID_USER_FIRST_NAME)
+    if (!userInfo.lastname) throw new Error(ErrorTypes.INVALID_USER_LAST_NAME)
 
     this.setUserFirstName(userInfo.firstname)
     this.setUserLastName(userInfo.lastname)

src/dialogs/AccountContactMissingDialog.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+    content-class="account-authorization-dialog"
+  >
+    <v-card>
+      <v-card-title id="dialog-title">
+        Account Error
+      </v-card-title>
+
+      <v-card-text>
+        <p class="font-14">
+          This account seems to have incomplete information. Click ‘OK’ to update your account details.
+        </p>
+      </v-card-text>
+
+      <v-divider class="my-0" />
+
+      <v-card-actions>
+        <v-btn
+          id="dialog-exit-button"
+          color="primary"
+          text
+          @click="exit()"
+        >
+          Exit
+        </v-btn>
+        <v-spacer />
+        <v-btn
+          id="to-user-profile-button"
+          color="primary"
+          text
+          @click="redirectToUserProfile"
+        >
+          OK
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class AccountContactMissingDialog extends Vue {
+  /** Prop to display the dialog. */
+  @Prop({ default: false }) readonly dialog!: boolean
+
+  /** Prop to provide attachment selector. */
+  @Prop({ default: '' }) readonly attach!: string
+
+  // Pass click events to parent.
+  @Emit() exit (): void {}
+
+  // Method to redirect to user profile page
+  redirectToUserProfile (): void {
+    const authWebUrl = sessionStorage.getItem('AUTH_WEB_URL')
+    const userProfileUrl = `${authWebUrl}/userprofile`
+    window.location.href = userProfileUrl
+  }
+}
+</script>

src/dialogs/index.ts

@@ -4,6 +4,7 @@
  */
 
 export { default as AccountAuthorizationDialog } from './AccountAuthorizationDialog.vue'
+export { default as AccountContactMissingDialog } from './AccountContactMissingDialog.vue'
 export { default as FetchErrorDialog } from './FetchErrorDialog.vue'
 export { default as FileAndPayInvalidNameRequestDialog } from './FileAndPayInvalidNameRequestDialog.vue'
 export { default as FilingSurveyDialog } from './FilingSurveyDialog.vue'

src/enums/errorTypes.ts

@@ -0,0 +1,7 @@
+export enum ErrorTypes {
+  INVALID_USER_INFO='Invalid user info',
+  INVALID_USER_EMAIL='Invalid user email',
+  INVALID_USER_FIRST_NAME='Invalid user first name',
+  INVALID_USER_LAST_NAME = 'Invalid user last name',
+  INVALID_USER_PHONE='Invalid user phone'
+}

src/enums/index.ts

@@ -13,6 +13,7 @@ export * from './pdfPageSize'
 export * from './routeNames'
 export * from './ruleIds'
 export * from './views'
+export * from './errorTypes'
 
 // external enums
 export { CorpTypeCd } from '@bcrs-shared-components/corp-type-module'

tests/unit/AccountContactMissingDialog.spec.ts

@@ -0,0 +1,56 @@
+import { shallowMount } from '@vue/test-utils'
+import AccountContactMissingDialog from '@/dialogs/AccountContactMissingDialog.vue'
+import Vuetify from 'vuetify'
+import Vue from 'vue'
+
+Vue.use(Vuetify)
+
+// Prevent the warning "[Vuetify] Unable to locate target [data-app]"
+document.body.setAttribute('data-app', 'true')
+
+describe('AccountContactMissingDialog.vue', () => {
+  let vuetify: any
+
+  beforeEach(() => {
+    vuetify = new Vuetify()
+  })
+
+  it('renders the dialog', () => {
+    const wrapper = shallowMount(AccountContactMissingDialog, {
+      vuetify,
+      propsData: { dialog: true }
+    })
+    expect(wrapper.find('#dialog-title').text()).toBe('Account Error')
+  })
+
+  it('redirects to user profile on OK click', () => {
+    // Mocking sessionStorage
+    const sessionStorageMock = {
+      getItem () {
+        return 'https://dev.account.bcregistry.gov.bc.ca'
+      }
+    }
+    Object.defineProperty(window, 'sessionStorage', { value: sessionStorageMock })
+
+    // Mounting the component
+    const wrapper = shallowMount(AccountContactMissingDialog, {
+      vuetify,
+      propsData: { dialog: true }
+    })
+
+    // Override window.location.href
+    let redirectedUrl = ''
+    // eslint-disable-next-line accessor-pairs
+    Object.defineProperty(window.location, 'href', {
+      set (url: string) {
+        redirectedUrl = url
+      }
+    })
+
+    // Calling the method directly
+    wrapper.vm.redirectToUserProfile()
+
+    // Checking the logic inside the method
+    expect(redirectedUrl).toBe('https://dev.account.bcregistry.gov.bc.ca/userprofile')
+  })
+})