From dfa1a162e6e5cbe681582246915a86b1788d0ceb Mon Sep 17 00:00:00 2001 From: Shaoyun Tong <144159934+tshyun24@users.noreply.github.com> Date: Mon, 20 Nov 2023 14:46:05 -0800 Subject: [PATCH] 18449 - GP/SP registration modify (#582) * GP/SP regirstration modify * package version * fix linting * unit tests * clean up * fix linting * unit tests fix * unit tests fixing 2 * fix linting * reset back to previous one * show old UI with registries staff only * GP/SP regirstration modify * fix linting * unit tests * clean up * unit tests fix * unit tests fixing 2 * fix UI and testing * fix registries contact info messed up issue * fix lint * clean up help contact us * clean up the getter, import etc.. * revert FirmContactInfo back * remove obsolete component --- package-lock.json | 4 +- package.json | 2 +- src/components/Registration/HelpContactUs.vue | 8 +- src/components/common/FirmContactInfo.vue | 57 ++++++++++ src/components/common/RegAddEditOrgPerson.vue | 85 +++++++++++++-- src/mixins/add-edit-org-person-mixin.ts | 1 + tests/unit/FirmContactInfo.spec.ts | 21 ++++ tests/unit/HelpContactUs.spec.ts | 7 +- tests/unit/RegAddEditOrgPerson.spec.ts | 101 ++++++++++++++---- 9 files changed, 250 insertions(+), 36 deletions(-) create mode 100644 src/components/common/FirmContactInfo.vue create mode 100644 tests/unit/FirmContactInfo.spec.ts diff --git a/package-lock.json b/package-lock.json index e667cf63e..2afe243c2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "business-create-ui", - "version": "5.6.0", + "version": "5.6.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "business-create-ui", - "version": "5.6.0", + "version": "5.6.1", "dependencies": { "@babel/compat-data": "^7.21.5", "@bcrs-shared-components/approval-type": "1.0.19", diff --git a/package.json b/package.json index cb62c9b71..8de5eba61 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "business-create-ui", - "version": "5.6.0", + "version": "5.6.1", "private": true, "appName": "Create UI", "sbcName": "SBC Common Components", diff --git a/src/components/Registration/HelpContactUs.vue b/src/components/Registration/HelpContactUs.vue index 304917df1..20170bb89 100644 --- a/src/components/Registration/HelpContactUs.vue +++ b/src/components/Registration/HelpContactUs.vue @@ -32,10 +32,10 @@

- If you require further assistance adding a business or corporation, please contact us. + If you require further assistance adding a business, please contact us.

- +
import { Component, Vue } from 'vue-property-decorator' -import RegistriesContactInfo from '@/components/common/RegistriesContactInfo.vue' +import FirmContactInfo from '@/components/common/FirmContactInfo.vue' @Component({ components: { - RegistriesContactInfo + FirmContactInfo } }) export default class HelpContactUs extends Vue { diff --git a/src/components/common/FirmContactInfo.vue b/src/components/common/FirmContactInfo.vue new file mode 100644 index 000000000..c47000de4 --- /dev/null +++ b/src/components/common/FirmContactInfo.vue @@ -0,0 +1,57 @@ + + + + + diff --git a/src/components/common/RegAddEditOrgPerson.vue b/src/components/common/RegAddEditOrgPerson.vue index d77abeb7b..4e1df9fbc 100644 --- a/src/components/common/RegAddEditOrgPerson.vue +++ b/src/components/common/RegAddEditOrgPerson.vue @@ -21,8 +21,30 @@ class="add-org-header" :class="{'error-text': !addPersonOrgFormValid}" > - Add Business or Corporation - Edit Business or Corporation +
+ Add Business or Corporation + Edit Business or Corporation +
+ +
+ + + +
@@ -104,9 +126,9 @@

- + - +
@@ -235,7 +257,7 @@ a bank or a railway, use the manual entry form. All other types of business cannot be a partner.

- +

@@ -256,6 +278,48 @@ @undoBusiness="resetBusinessDetails()" /> + + +

+
+ +

+ Important: If the addresses shown below are out of date, you + may update them here. The updates are applicable only to this application. +

+ +
+
+

+ Enter an existing B.C. business as the proprietor. +

+
+
+

+ Enter an existing B.C. business as a partner. +

+
+ + + + +
@@ -540,6 +604,11 @@ div.three-column { color: $gray7; } +.help { + margin-top: 30px; + margin-bottom: 40px; +} + // align checkbox with top of its label :deep(.v-input--checkbox .v-input__slot) { align-items: flex-start; diff --git a/src/mixins/add-edit-org-person-mixin.ts b/src/mixins/add-edit-org-person-mixin.ts index f510b3741..51311193d 100644 --- a/src/mixins/add-edit-org-person-mixin.ts +++ b/src/mixins/add-edit-org-person-mixin.ts @@ -53,6 +53,7 @@ export default class AddEditOrgPersonMixin extends Vue { addPersonOrgFormValid = true enableRules = false inProgressBusinessLookup = EmptyBusinessLookup + businessLookupLabel = 'Business Name or Incorporation/Registration Number' // Address related properties inProgressMailingAddress = {} as AddressIF diff --git a/tests/unit/FirmContactInfo.spec.ts b/tests/unit/FirmContactInfo.spec.ts new file mode 100644 index 000000000..44ac64d1c --- /dev/null +++ b/tests/unit/FirmContactInfo.spec.ts @@ -0,0 +1,21 @@ +import Vuetify from 'vuetify' +import { mount } from '@vue/test-utils' +import FirmContactInfo from '@/components/common/FirmContactInfo.vue' + +const vuetify = new Vuetify({}) + +describe('FirmContactInfo', () => { + it('Displays expected content', () => { + const wrapper = mount(FirmContactInfo, { vuetify }) + + // verify content + const listItems = wrapper.findAll('.contact-container') + expect(listItems.length).toBe(2) + expect(listItems.at(0).find('span').text()).toBe('Canada and U.S. Toll Free:') + expect(listItems.at(0).find('.contact-value').text()).toBe('1-877-370-1033') + expect(listItems.at(1).find('span').text()).toBe('Victoria Office:') + expect(listItems.at(1).find('.contact-value').text()).toBe('250-370-1033') + + wrapper.destroy() + }) +}) diff --git a/tests/unit/HelpContactUs.spec.ts b/tests/unit/HelpContactUs.spec.ts index e65d65c2e..c4f69c0d8 100644 --- a/tests/unit/HelpContactUs.spec.ts +++ b/tests/unit/HelpContactUs.spec.ts @@ -1,7 +1,7 @@ import Vuetify from 'vuetify' import { mount } from '@vue/test-utils' import HelpContactUs from '@/components/Registration/HelpContactUs.vue' -import RegistriesContactInfo from '@/components/common/RegistriesContactInfo.vue' +import FirmContactInfo from '@/components/common/FirmContactInfo.vue' const vuetify = new Vuetify({}) @@ -31,10 +31,11 @@ describe('HelpBusinessNumber', () => { expect(wrapper.find('.help-header h2').text()).toBe('Contact BC Registries') // verify paragraph - expect(wrapper.find('p').text()).toContain('If you require further assistance') + expect(wrapper.find('p').text()) + .toContain('If you require further assistance adding a business, please contact us.') // verify contact info component - expect(wrapper.findComponent(RegistriesContactInfo).exists()).toBe(true) + expect(wrapper.findComponent(FirmContactInfo).exists()).toBe(true) wrapper.destroy() }) diff --git a/tests/unit/RegAddEditOrgPerson.spec.ts b/tests/unit/RegAddEditOrgPerson.spec.ts index a49a87bc9..6bb740325 100644 --- a/tests/unit/RegAddEditOrgPerson.spec.ts +++ b/tests/unit/RegAddEditOrgPerson.spec.ts @@ -211,7 +211,7 @@ function createComponent ( }) } -store.stateModel.nameRequest.legalType = CorpTypeCd.SOLE_PROP +store.stateModel.entityType = CorpTypeCd.SOLE_PROP store.stateModel.currentDate = '2021-04-01' describe('Registration Add/Edit Org/Person component', () => { @@ -363,7 +363,8 @@ describe('Registration Add/Edit Org/Person component', () => { wrapper.destroy() }) - it('displays form data for proprietor-org (SP) - manual add', async () => { + it('displays form data for proprietor-org (SP) - manual add - registries staff only', async () => { + store.stateModel.tombstone.keycloakRoles = ['staff'] const wrapper = createComponent(validProprietorOrg, -1, null) await wrapper.find('.lookup-toggle').trigger('click') @@ -375,29 +376,55 @@ describe('Registration Add/Edit Org/Person component', () => { wrapper.destroy() }) - it('displays form data for proprietor-org (SP) - business lookup', () => { + it('displays form data for proprietor-org (SP) - business lookup - registries staff', () => { + store.stateModel.tombstone.keycloakRoles = ['staff'] const wrapper = createComponent(validProprietorOrg, -1, null) - expect(wrapper.find('.business-lookup-article label').text()).toContain('Business or Corporation Registered in B.C') + expect(wrapper.findAll('.business-lookup-article label').at(0).text()) + .toContain('Business or Corporation Registered in B.C') + expect(wrapper.findAll('.business-lookup-article label').at(1).text()) + .toContain('Business or Corporation Name or Incorporation Number') expect(wrapper.findAll('.business-lookup-article p').at(0).text()).toContain('the Proprietor') wrapper.destroy() }) - it('displays form data for proprietor-org (SP) - edit', async () => { + it('displays form data for proprietor-org (SP) - business lookup - SBC staff or client', () => { + store.stateModel.tombstone.keycloakRoles = [''] + const wrapper = createComponent(validProprietorOrg, -1, null) + + expect(wrapper.find('.business-lookup-article label').text()).toContain('Business') + expect(wrapper.findAll('.business-lookup-article p').at(0).text()) + .toContain('Enter an existing B.C. business as the proprietor') + + wrapper.destroy() + }) + + it('displays form data for proprietor-org (SP) - edit - registries staff', async () => { + store.stateModel.tombstone.keycloakRoles = ['staff'] const wrapper = createComponent(validProprietorOrg, 0, null) - await wrapper.find('.lookup-toggle').trigger('click') + // verify input values + const emailInput = wrapper.find(`${emailAddressSelector} input`) + // FUTURE: verify mailing address and delivery address + expect((emailInput.element as HTMLInputElement).value) + .toEqual(validProprietorOrg.officer.email) + + // verify buttons + expect(wrapper.find(buttonDoneSelector).attributes('disabled')).toBeUndefined() + expect(wrapper.find(buttonRemoveSelector).attributes('disabled')).toBeUndefined() + expect(wrapper.find(buttonCancelSelector).attributes('disabled')).toBeUndefined() + + wrapper.destroy() + }) + + it('displays form data for proprietor-org (SP) - edit - SBC staff or client', async () => { + store.stateModel.tombstone.keycloakRoles = [''] + const wrapper = createComponent(validProprietorOrg, 0, null) // verify input values - const confirmCheckboxInput = wrapper.find(`${confirmCheckboxSelector} input`) - const orgNameInput = wrapper.find(`${orgNameSelector} input`) const emailInput = wrapper.find(`${emailAddressSelector} input`) // FUTURE: verify mailing address and delivery address - expect((confirmCheckboxInput.element as HTMLInputElement).checked) - .toEqual(validProprietorOrg.confirmBusiness) - expect((orgNameInput.element as HTMLInputElement).value) - .toEqual(validProprietorOrg.officer.organizationName) expect((emailInput.element as HTMLInputElement).value) .toEqual(validProprietorOrg.officer.email) @@ -409,7 +436,8 @@ describe('Registration Add/Edit Org/Person component', () => { wrapper.destroy() }) - it('displays form data for partner-org (GP) - manual add', async () => { + it('displays form data for partner-org (GP) - manual add - registries staff only', async () => { + store.stateModel.tombstone.keycloakRoles = ['staff'] const wrapper = createComponent(validPartnerOrg, -1, null) await wrapper.find('.lookup-toggle').trigger('click') @@ -421,16 +449,32 @@ describe('Registration Add/Edit Org/Person component', () => { wrapper.destroy() }) - it('displays form data for partner-org (GP) - business lookup', () => { + it('displays form data for partner-org (GP) - business lookup - registries staff', () => { + store.stateModel.tombstone.keycloakRoles = ['staff'] const wrapper = createComponent(validPartnerOrg, -1, null) - expect(wrapper.find('.business-lookup-article label').text()).toContain('Business or Corporation Registered in B.C') + expect(wrapper.findAll('.business-lookup-article label').at(0).text()) + .toContain('Business or Corporation Registered in B.C') + expect(wrapper.findAll('.business-lookup-article label').at(1).text()) + .toContain('Business or Corporation Name or Incorporation Number') expect(wrapper.findAll('.business-lookup-article p').at(0).text()).toContain('a partner') wrapper.destroy() }) - it('displays form data for partner-org (GP) - edit', async () => { + it('displays form data for partner-org (GP) - business lookup - SBC staff or client', () => { + store.stateModel.tombstone.keycloakRoles = [''] + const wrapper = createComponent(validPartnerOrg, -1, null) + + expect(wrapper.find('.business-lookup-article label').text()).toContain('Business') + expect(wrapper.findAll('.business-lookup-article p').at(0).text()) + .toContain('Enter an existing B.C. business as a partner') + + wrapper.destroy() + }) + + it('displays form data for partner-org (GP) - edit - registries staff', async () => { + store.stateModel.tombstone.keycloakRoles = ['staff'] const wrapper = createComponent(validPartnerOrg, 0, null) await wrapper.find('.lookup-toggle').trigger('click') @@ -460,6 +504,24 @@ describe('Registration Add/Edit Org/Person component', () => { wrapper.destroy() }) + it('displays form data for partner-org (GP) - edit - SBC staff or client', async () => { + store.stateModel.tombstone.keycloakRoles = [''] + const wrapper = createComponent(validPartnerOrg, 0, null) + + // verify input values + const emailInput = wrapper.find(`${emailAddressSelector} input`) + // FUTURE: verify mailing address and delivery address + expect((emailInput.element as HTMLInputElement).value) + .toEqual(validPartnerOrg.officer.email) + + // verify buttons + expect(wrapper.find(buttonDoneSelector).attributes('disabled')).toBeUndefined() + expect(wrapper.find(buttonRemoveSelector).attributes('disabled')).toBeUndefined() + expect(wrapper.find(buttonCancelSelector).attributes('disabled')).toBeUndefined() + + wrapper.destroy() + }) + it('enables Remove button in edit mode', () => { const wrapper = createComponent(validCompletingParty, 0, null) expect(wrapper.find(buttonRemoveSelector).attributes('disabled')).toBeUndefined() @@ -506,7 +568,8 @@ describe('Registration Add/Edit Org/Person component', () => { wrapper.destroy() }) - it('does not display error message when user enters valid org name', async () => { + it('does not display error message when user enters valid org name - registries staff only', async () => { + store.stateModel.tombstone.keycloakRoles = ['staff'] const wrapper = createComponent(validProprietorOrg, NaN, null) await wrapper.find('.lookup-toggle').trigger('click') @@ -524,7 +587,8 @@ describe('Registration Add/Edit Org/Person component', () => { wrapper.destroy() }) - it('displays error message when user enters invalid org name', async () => { + it('displays error message when user enters invalid org name - registries staff only', async () => { + store.stateModel.tombstone.keycloakRoles = ['staff'] const wrapper = createComponent(validProprietorOrg, NaN, null) await wrapper.find('.lookup-toggle').trigger('click') @@ -541,6 +605,7 @@ describe('Registration Add/Edit Org/Person component', () => { expect(wrapper.vm.$data.addPersonOrgFormValid).toBe(false) wrapper.destroy() + store.stateModel.tombstone.keycloakRoles = [''] }) it('does not display error message when user enters valid person names', async () => {