19874 Changed some snackbar messages to dialogs

package.json

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

src/components/Amalgamation/AmalgamatingBusinesses.vue

@@ -1,5 +1,13 @@
 <template>
   <div id="amalgamating-businesses">
+    <GenericErrorDialog
+      attach="#amalgamating-businesses"
+      :dialog="errorDialog"
+      :text="errorDialogText"
+      :title="errorDialogTitle"
+      @close="errorDialog = false"
+    />
+
     <section class="checklist-section">
       <div class="subhead">
         Your application must include the following:
@@ -239,7 +247,7 @@
       @allOk="allOk=$event"
     />
 
-    <!-- snackbar to temporarily show fetch errors -->
+    <!-- snackbar to temporarily show certain errors -->
     <v-snackbar
       v-model="snackbar"
       timeout="3000"
@@ -275,11 +283,13 @@ import { AmlRoles, AmlTypes, EntityStates } from '@/enums'
 import { JurisdictionLocation } from '@bcrs-shared-components/enums'
 import BusinessTable from '@/components/Amalgamation/BusinessTable.vue'
 import { CorpTypeCd } from '@bcrs-shared-components/corp-type-module'
+import { GenericErrorDialog } from '@/dialogs/'
 
 @Component({
   components: {
     BusinessLookup,
     BusinessTable,
+    GenericErrorDialog,
     Jurisdiction
   }
 })
@@ -305,6 +315,9 @@ export default class AmalgamatingBusinesses extends Mixins(AmalgamationMixin, Co
   allOk = false
   snackbar = false
   snackbarText = ''
+  errorDialog = false
+  errorDialogText = undefined as string
+  errorDialogTitle = undefined as string
 
   // Foreign business properties
   jurisdiction = null
@@ -446,8 +459,9 @@ export default class AmalgamatingBusinesses extends Mixins(AmalgamationMixin, Co
     if (!business.authInfo) {
       // If a staff account couldn't fetch the auth info then the business doesn't exist.
       if (this.isRoleStaff) {
-        this.snackbarText = 'Business doesn\'t exist in LEAR.'
-        this.snackbar = true
+        // Report error.
+        console.log('Missing auth info.')
+        this.showUnableToAddBusinessDialog()
 
         // Hide spinner.
         this.$root.$emit('showSpinner', false)
@@ -476,8 +490,9 @@ export default class AmalgamatingBusinesses extends Mixins(AmalgamationMixin, Co
     // Check for Legal API fetch issues.
     // NB - don't check for null firstTask since that's valid
     if (!business.businessInfo || !business.addresses || !business.firstFiling) {
-      this.snackbarText = 'Unable to add that business.'
-      this.snackbar = true
+      // Report error.
+      console.log('Missing business info or addresses or first filing.')
+      this.showSomethingWentWrongDialog()
 
       // Hide spinner.
       this.$root.$emit('showSpinner', false)
@@ -562,23 +577,38 @@ export default class AmalgamatingBusinesses extends Mixins(AmalgamationMixin, Co
   /** Sets the specified business as the new holding/primary business. */
   async newHoldingPrimaryBusiness (business: AmalgamatingBusinessIF): Promise<void> {
     try {
-      // show spinner since the network calls below can take a few seconds
+      // Show spinner since the network calls below can take a few seconds.
       this.$root.$emit('showSpinner', true)
 
-      // fetch the new holding/primary business' data and update the prepopulated data
-      // this will overwrite office addresses, directors, share structure and contact info
+      // Fetch the new holding/primary business' data and update the prepopulated data.
+      // This will overwrite office addresses, directors, share structure, contact info,
+      // legal name and legal type.
       await this.updatePrepopulatedData(business, true)
     } catch (error) {
-      // eslint-disable-next-line no-console
+      // Report error.
       console.log('Error setting new holding/primary business =', error)
-      this.snackbarText = 'Error marking new business.'
-      this.snackbar = true
+      this.showSomethingWentWrongDialog()
     } finally {
-      // hide spinner
+      // Hide spinner.
       this.$root.$emit('showSpinner', false)
     }
   }
 
+  private showUnableToAddBusinessDialog (): void {
+    this.errorDialogTitle = 'Unable to add business'
+    this.errorDialogText = 'The business you selected could not be added to this filing. This is ' +
+      'likely because that business has not been moved to the modernized system yet.<br><br> Please ' +
+      'contact us:'
+    this.errorDialog = true
+  }
+
+  private showSomethingWentWrongDialog (): void {
+    this.errorDialogTitle = 'Something went wrong'
+    this.errorDialogText = 'An error occurred. Please try again in a few minutes. If this error ' +
+      'persists, please contact us.'
+    this.errorDialog = true
+  }
+
   /**
    * Check if business is already in table.
    * @param business The business being added.

src/components/common/RegistriesContactInfo.vue

@@ -7,7 +7,7 @@
       >
         mdi-phone
       </v-icon>
-      <span class="px-2">Canada and U.S. Toll Free:</span>
+      <span class="px-2 font-weight-bold">Canada and U.S. Toll Free:</span>
       <a
         href="tel:+1-877-526-1526"
         class="contact-value"
@@ -20,7 +20,7 @@
       >
         mdi-phone
       </v-icon>
-      <span class="px-2">Victoria Office:</span>
+      <span class="px-2 font-weight-bold">Victoria Office:</span>
       <a
         href="tel:+1-250-387-7848"
         class="contact-value"
@@ -33,7 +33,7 @@
       >
         mdi-email
       </v-icon>
-      <span class="px-2">Email:</span>
+      <span class="px-2 font-weight-bold">Email:</span>
       <a
         href="mailto:BCRegistries@gov.bc.ca"
         class="contact-value"

src/dialogs/GenericErrorDialog.vue

@@ -0,0 +1,61 @@
+<template>
+  <v-dialog
+    v-model="dialog"
+    width="45rem"
+    persistent
+    :attach="attach"
+    content-class="generic-error-dialog"
+    @keydown.esc="close()"
+  >
+    <v-card>
+      <v-card-title>{{ title }}</v-card-title>
+
+      <v-card-text class="pre-wrap">
+        <div
+          v-show="!!text"
+          class="font-15"
+          v-html="text"
+        />
+
+        <RegistriesContactInfo class="mt-6" />
+      </v-card-text>
+
+      <v-card-actions class="justify-center pt-0 pb-9">
+        <v-btn
+          color="primary"
+          large
+          @click="close()"
+        >
+          Close
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
+import RegistriesContactInfo from '@/components/common/RegistriesContactInfo.vue'
+
+@Component({
+  components: {
+    RegistriesContactInfo
+  }
+})
+export default class GenericErrorDialog extends Vue {
+  @Prop({ default: '' }) readonly attach!: string
+  @Prop({ default: false }) readonly dialog!: boolean
+  @Prop({ default: 'Please contact us:' }) readonly text!: string
+  @Prop({ default: 'An error occurred' }) readonly title!: string
+
+  @Emit() close (): void {}
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/theme.scss';
+
+.v-card__text {
+  color: $gray7 !important;
+}
+</style>

src/dialogs/index.ts

@@ -8,6 +8,7 @@ export { default as AccountContactMissingDialog } from './AccountContactMissingD
 export { default as FetchErrorDialog } from './FetchErrorDialog.vue'
 export { default as FileAndPayInvalidNameRequestDialog } from './FileAndPayInvalidNameRequestDialog.vue'
 export { default as FilingSurveyDialog } from './FilingSurveyDialog.vue'
+export { default as GenericErrorDialog } from './GenericErrorDialog.vue'
 export { default as InvalidFilingDialog } from './InvalidFilingDialog.vue'
 export { default as InvalidRouteDialog } from './InvalidRouteDialog.vue'
 export { default as NameRequestInvalidErrorDialog } from './NameRequestInvalidErrorDialog.vue'

tests/unit/AmalgamatingBusinesses.spec.ts

@@ -322,9 +322,10 @@ describe('Amalgamating Businesses - add amalgamating business', () => {
     // verify data
     expect(store.getAmalgamatingBusinesses.length).toBe(0)
 
-    // verify snackbar is displayed
-    expect(wrapper.vm.snackbar).toBe(true)
-    expect(wrapper.vm.snackbarText).toBe('Business doesn\'t exist in LEAR.')
+    // verify dialog is displayed
+    expect(wrapper.vm.errorDialog).toBe(true)
+    expect(wrapper.vm.errorDialogTitle).toBe('Unable to add business')
+    expect(wrapper.vm.errorDialogText).toContain('The business you selected could not be added to this filing.')
 
     vi.resetAllMocks()
   })
@@ -349,9 +350,10 @@ describe('Amalgamating Businesses - add amalgamating business', () => {
     // verify data
     expect(store.getAmalgamatingBusinesses.length).toBe(0)
 
-    // verify snackbar is displayed
-    expect(wrapper.vm.snackbar).toBe(true)
-    expect(wrapper.vm.snackbarText).toBe('Unable to add that business.')
+    // verify dialog is displayed
+    expect(wrapper.vm.errorDialog).toBe(true)
+    expect(wrapper.vm.errorDialogTitle).toBe('Something went wrong')
+    expect(wrapper.vm.errorDialogText).toContain('An error occurred.')
 
     vi.resetAllMocks()
   })
@@ -376,9 +378,10 @@ describe('Amalgamating Businesses - add amalgamating business', () => {
     // verify data
     expect(store.getAmalgamatingBusinesses.length).toBe(0)
 
-    // verify snackbar is displayed
-    expect(wrapper.vm.snackbar).toBe(true)
-    expect(wrapper.vm.snackbarText).toBe('Unable to add that business.')
+    // verify dialog is displayed
+    expect(wrapper.vm.errorDialog).toBe(true)
+    expect(wrapper.vm.errorDialogTitle).toBe('Something went wrong')
+    expect(wrapper.vm.errorDialogText).toContain('An error occurred.')
 
     vi.resetAllMocks()
   })
@@ -403,9 +406,10 @@ describe('Amalgamating Businesses - add amalgamating business', () => {
     // verify data
     expect(store.getAmalgamatingBusinesses.length).toBe(0)
 
-    // verify snackbar is displayed
-    expect(wrapper.vm.snackbar).toBe(true)
-    expect(wrapper.vm.snackbarText).toBe('Unable to add that business.')
+    // verify dialog is displayed
+    expect(wrapper.vm.errorDialog).toBe(true)
+    expect(wrapper.vm.errorDialogTitle).toBe('Something went wrong')
+    expect(wrapper.vm.errorDialogText).toContain('An error occurred.')
 
     vi.resetAllMocks()
   })

tests/unit/GenericErrorDialog.spec.ts

@@ -0,0 +1,61 @@
+import { mount } from '@vue/test-utils'
+import Vuetify from 'vuetify'
+import GenericErrorDialog from '@/dialogs/GenericErrorDialog.vue'
+import RegistriesContactInfo from '@/components/common/RegistriesContactInfo.vue'
+
+const vuetify = new Vuetify({})
+
+describe('GenericErrorDialog.vue', () => {
+  it('does not render the dialog when disabled', () => {
+    const wrapper = mount(GenericErrorDialog, {
+      vuetify
+    })
+
+    expect(wrapper.find('div[role="dialog"]').exists()).toBe(false)
+
+    wrapper.destroy()
+  })
+
+  it('renders the dialog with default text and title', () => {
+    const wrapper = mount(GenericErrorDialog, {
+      vuetify,
+      propsData: { dialog: true }
+    })
+
+    expect(wrapper.find('div[role="dialog"]').exists()).toBe(true)
+    expect(wrapper.find('.v-card__title').text()).toBe('An error occurred')
+    expect(wrapper.find('.v-card__text > div').text()).toBe('Please contact us:')
+    expect(wrapper.find('.v-card__text').findComponent(RegistriesContactInfo).exists()).toBe(true)
+    expect(wrapper.find('.v-card__actions').text()).toBe('Close')
+
+    wrapper.destroy()
+  })
+
+  it('renders the dialog with custom text and title', () => {
+    const wrapper = mount(GenericErrorDialog, {
+      vuetify,
+      propsData: { dialog: true, text: 'Custom text', title: 'Custom title' }
+    })
+
+    expect(wrapper.find('div[role="dialog"]').exists()).toBe(true)
+    expect(wrapper.find('.v-card__title').text()).toBe('Custom title')
+    expect(wrapper.find('.v-card__text > div').text()).toBe('Custom text')
+    expect(wrapper.find('.v-card__text').findComponent(RegistriesContactInfo).exists()).toBe(true)
+    expect(wrapper.find('.v-card__actions').text()).toBe('Close')
+
+    wrapper.destroy()
+  })
+
+  it('emits close event when the Close button is clicked', async () => {
+    const wrapper = mount(GenericErrorDialog, {
+      vuetify,
+      propsData: { dialog: true }
+    })
+
+    expect(wrapper.emitted('close')).toBeUndefined()
+    await wrapper.find('.v-btn').trigger('click')
+    expect(wrapper.emitted('close')).toEqual([[]])
+
+    wrapper.destroy()
+  })
+})