forked from bcgov/business-filings-ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
19291 Implemented "future effective amalgamation" alert (bcgov#608)
* - app version = 7.0.34 - moved some "unknown" from script to template - added amalgamation alert component - added optional data object to business warnings interface - added getter for future effective amalgamation warning - added alert to dashboard - fixed some route type errors - added test suite - updated unit tests * - updated [Unknown] -> [unknown] --------- Co-authored-by: Severin Beauvais <severin.beauvais@gov.bc.ca>
- Loading branch information
1 parent
4611415
commit cb89325
Showing
13 changed files
with
230 additions
and
27 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| <template> | ||
| <v-expansion-panels | ||
| id="amalgamation-container" | ||
| v-model="panel" | ||
| > | ||
| <v-expansion-panel class="mb-6"> | ||
| <v-expansion-panel-header | ||
| hide-actions | ||
| class="d-flex justify-space-between px-6 py-5" | ||
| > | ||
| <h3> | ||
| <v-icon | ||
| left | ||
| color="orange darken-2" | ||
| > | ||
| mdi-alert | ||
| </v-icon> | ||
| <span>This corporation is part of an amalgamation and is scheduled to become | ||
| historical on {{ amalgamationDate || '[unknown]' }}.</span> | ||
| </h3> | ||
| <v-btn | ||
| text | ||
| color="primary" | ||
| class="details-btn my-n1" | ||
| @click.stop="togglePanel()" | ||
| > | ||
| <span color="primary">{{ panel === 0 ? "Hide Details" : "View Details" }}</span> | ||
| <v-icon | ||
| right | ||
| color="primary" | ||
| > | ||
| {{ panel === 0 ? "mdi-chevron-up" : "mdi-chevron-down" }} | ||
| </v-icon> | ||
| </v-btn> | ||
| </v-expansion-panel-header> | ||
|
|
||
| <v-expansion-panel-content> | ||
| <p class="mb-0"> | ||
| If you have any questions, please contact BC Registries staff: | ||
| </p> | ||
| <ContactInfo class="pt-5" /> | ||
| </v-expansion-panel-content> | ||
| </v-expansion-panel> | ||
| </v-expansion-panels> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { Component, Vue } from 'vue-property-decorator' | ||
| import { Getter } from 'pinia-class' | ||
| import { ContactInfo } from '@/components/common' | ||
| import { useBusinessStore } from '@/stores' | ||
| import { ApiDateTimeUtc, BusinessWarningIF } from '@/interfaces' | ||
| import { DateUtilities } from '@/services' | ||
| @Component({ | ||
| components: { ContactInfo } | ||
| }) | ||
| export default class Amalgamation extends Vue { | ||
| @Getter(useBusinessStore) getBusinessWarnings!: BusinessWarningIF[] | ||
| panel = 1 | ||
| togglePanel (): void { | ||
| this.panel = (this.panel === 1 ? 0 : 1) | ||
| } | ||
| get amalgamationDate (): string { | ||
| const warning = this.getBusinessWarnings.find(item => | ||
| item.warningType?.includes('FUTURE_EFFECTIVE_AMALGAMATION') | ||
| ) | ||
| const date = warning?.data?.amalgamationDate as ApiDateTimeUtc | ||
| return DateUtilities.apiToPacificDate(date, true) | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| @import "@/assets/styles/theme.scss"; | ||
| .v-expansion-panel-header { | ||
| pointer-events: none; // disable whole-row expansion | ||
| } | ||
| h3 { | ||
| .v-icon { | ||
| margin-top: -2px; | ||
| font-size: $px-20; | ||
| } | ||
| span { | ||
| font-size: $px-14; | ||
| } | ||
| } | ||
| .details-btn { | ||
| pointer-events: auto; // enable detail button only | ||
| max-width: fit-content; | ||
| color: $app-blue; | ||
| span { | ||
| font-size: $px-13; | ||
| } | ||
| .v-icon { | ||
| font-size: $px-24 !important; | ||
| } | ||
| } | ||
| // override default expansion panel padding | ||
| :deep(.v-expansion-panel-content__wrap) { | ||
| padding: 0 1.5rem 1.25rem 1.5rem; | ||
| } | ||
| p { | ||
| font-size: $px-14; | ||
| } | ||
| // override contact info sizes | ||
| :deep(.contact-info .contact-container) { | ||
| .v-icon { | ||
| font-size: $px-16 !important; | ||
| } | ||
| span { | ||
| font-size: $px-14 !important; | ||
| } | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import Vue from 'vue' | ||
| import Vuetify from 'vuetify' | ||
| import { mount } from '@vue/test-utils' | ||
| import { createPinia, setActivePinia } from 'pinia' | ||
| import { useBusinessStore } from '@/stores' | ||
| import Amalgamation from '@/components/Dashboard/Alerts/Amalgamation.vue' | ||
| import { ContactInfo } from '@/components/common' | ||
| import flushPromises from 'flush-promises' | ||
|
|
||
| Vue.use(Vuetify) | ||
| const vuetify = new Vuetify({}) | ||
|
|
||
| setActivePinia(createPinia()) | ||
| const businessStore = useBusinessStore() | ||
|
|
||
| describe('Amalgamation component', () => { | ||
| beforeAll(() => { | ||
| businessStore.$state.businessInfo.warnings = [ | ||
| { | ||
| code: 'AMALGAMATING_BUSINESS', | ||
| message: 'This business is part of a future effective amalgamation.', | ||
| warningType: 'FUTURE_EFFECTIVE_AMALGAMATION', | ||
| data: { | ||
| amalgamationDate: '2024-01-31T08:00:00+00:00' | ||
| } | ||
| } | ||
| ] | ||
| }) | ||
|
|
||
| it('Displays expansion panel closed', () => { | ||
| const wrapper = mount(Amalgamation, { vuetify }) | ||
|
|
||
| // verify content | ||
| expect(wrapper.find('h3').text()).toContain('This corporation is part of an amalgamation') | ||
| expect(wrapper.find('h3').text()).toContain('January 31, 2024') | ||
| expect(wrapper.find('.details-btn').text()).toBe('View Details') | ||
| expect(wrapper.find('.v-expansion-panel-content').exists()).toBe(false) | ||
|
|
||
| wrapper.destroy() | ||
| }) | ||
|
|
||
| it('Displays expansion panel open', async () => { | ||
| const wrapper = mount(Amalgamation, { vuetify }) | ||
|
|
||
| // click the button | ||
| await wrapper.find('.details-btn').trigger('click') | ||
| await flushPromises() // wait for expansion transition | ||
|
|
||
| // verify content | ||
| expect(wrapper.find('h3').text()).toContain('This corporation is part of an amalgamation') | ||
| expect(wrapper.find('h3').text()).toContain('January 31, 2024') | ||
| expect(wrapper.find('.v-expansion-panel-content').exists()).toBe(true) | ||
| expect(wrapper.find('.v-expansion-panel-content__wrap').text()).toContain('If you have any questions') | ||
| expect(wrapper.findComponent(ContactInfo).exists()).toBe(true) | ||
|
|
||
| wrapper.destroy() | ||
| }) | ||
|
|
||
| // FUTURE: add a text to verify hidePhoneNumbers() | ||
| }) |
Oops, something went wrong.