19291 Implemented "future effective amalgamation" alert

package.json

@@ -1,6 +1,6 @@
 {
   "name": "business-filings-ui",
-  "version": "7.0.33",
+  "version": "7.0.34",
   "private": true,
   "appName": "Filings UI",
   "sbcName": "SBC Common Components",

src/components/Dashboard/Alerts/Amalgamation.vue

@@ -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>

src/components/Dashboard/FilingHistoryList/LimitedRestorationExtensionFiling.vue

@@ -7,10 +7,10 @@
 
     <p>
       The period of restoration was successfuly extended and is active
-      <strong>until {{ expiryDateFriendly }}</strong>. At the end of the extended limited
-      restoration period, the company will be automatically dissolved. If you require assistance
-      to extend a limited restoration/reinstatement or wish to convert your restoration from a
-      limited period to a full restoration, please contact BC Registries staff:
+      <strong>until {{ expiryDateFriendly || '[unknown]' }}</strong>. At the end of the extended
+      limited restoration period, the company will be automatically dissolved. If you require
+      assistance to extend a limited restoration/reinstatement or wish to convert your restoration
+      from a limited period to a full restoration, please contact BC Registries staff:
     </p>
 
     <ContactInfo class="mt-4" />
@@ -33,7 +33,7 @@ export default class LimitedRestorationExtensionFiling extends Vue {
   /** The expiry date of the limited restoration extension filing. */
   get expiryDateFriendly (): string {
     const date = DateUtilities.yyyyMmDdToDate(this.filing.expiry)
-    return (DateUtilities.dateToPacificDate(date, true) || 'Unknown')
+    return DateUtilities.dateToPacificDate(date, true)
   }
 }
 

src/components/common/Certify.vue

@@ -38,7 +38,7 @@
           </template>
         </v-checkbox>
         <p class="certify-clause signature-date">
-          <strong>Date:</strong> {{ formattedCurrentDate }}
+          <strong>Date:</strong> {{ formattedCurrentDate || '[unknown]' }}
         </p>
         <p class="certify-clause">
           {{ message }}
@@ -94,7 +94,7 @@ export default class Certify extends Vue {
 
   get formattedCurrentDate (): string {
     const date = DateUtilities.yyyyMmDdToDate(this.getCurrentDate)
-    return (DateUtilities.dateToPacificDate(date, true) || 'Unknown')
+    return DateUtilities.dateToPacificDate(date, true)
   }
 
   /** The trimmed "Certified By" string (may be ''). */

src/components/common/DateTooltip.vue

@@ -9,10 +9,10 @@
         class="date-tooltip d-inline cursor-default"
         v-on="on"
       >
-        <span class="dotted-underline">{{ dateString }}</span>
+        <span class="dotted-underline">{{ dateString || '[unknown]' }}</span>
       </div>
     </template>
-    {{ dateTimeString }}
+    {{ dateTimeString || '[unknown]' }}
   </v-tooltip>
 </template>
 
@@ -25,11 +25,11 @@ export default class DateTooltip extends Vue {
   @Prop({ default: null }) readonly date!: Date
 
   get dateString (): string {
-    return (DateUtilities.dateToPacificDate(this.date) || '[unknown]')
+    return DateUtilities.dateToPacificDate(this.date)
   }
 
   get dateTimeString (): string {
-    return (DateUtilities.dateToPacificDateTime(this.date) || '[unknown]')
+    return DateUtilities.dateToPacificDateTime(this.date)
   }
 }
 </script>

src/interfaces/business-state-interfaces.ts

@@ -29,6 +29,7 @@ export interface BusinessWarningIF {
   filing?: string // not used
   message: string
   warningType: string // FUTURE: use an enum
+  data?: any // optional extra properties (eg, amalgamationDate)
 }
 
 /** The Business object from the Legal API. */

src/stores/businessStore.ts

@@ -137,6 +137,11 @@ export const useBusinessStore = defineStore('business', {
       )
     },
 
+    /** Is True if the business is part of a future effective amalgamation filing. */
+    isFutureEffectiveAmalgamation (): boolean {
+      return this.getBusinessWarnings.some(item => item.warningType === 'FUTURE_EFFECTIVE_AMALGAMATION')
+    },
+
     /** Is True if business is active. */
     isActive (): boolean {
       return (this.getBusinessState === EntityState.ACTIVE)

src/views/Dashboard.vue

@@ -29,6 +29,7 @@
                 </h2>
               </header>
               <!-- FUTURE: move these to a new Alerts component and inside one expansion panel -->
+              <Amalgamation v-if="isAmalgamationAlert" />
               <FrozenInformation v-if="isFrozenInformationAlert" />
               <MissingInformation v-if="isMissingInformationAlert" />
               <NotInCompliance v-if="isNotInComplianceAlert" />
@@ -237,15 +238,16 @@ import AddressListSm from '@/components/Dashboard/AddressListSm.vue'
 import CustodianListSm from '@/components/Dashboard/CustodianListSm.vue'
 import DirectorListSm from '@/components/Dashboard/DirectorListSm.vue'
 import FilingHistoryList from '@/components/Dashboard/FilingHistoryList.vue'
+import Amalgamation from '@/components/Dashboard/Alerts/Amalgamation.vue'
 import FrozenInformation from '@/components/Dashboard/Alerts/FrozenInformation.vue'
+import MissingInformation from '@/components/Dashboard/Alerts/MissingInformation.vue'
+import NotInCompliance from '@/components/Dashboard/Alerts/NotInCompliance.vue'
+import NotInGoodStanding from '@/components/Dashboard/Alerts/NotInGoodStanding.vue'
 import LegalObligation from '@/components/Dashboard/LegalObligation.vue'
 import ProprietorPartnersListSm from '@/components/Dashboard/ProprietorPartnersListSm.vue'
 import StaffNotation from '@/components/Dashboard/StaffNotation.vue'
 import TodoList from '@/components/Dashboard/TodoList.vue'
 import { CoaWarningDialog } from '@/components/dialogs'
-import MissingInformation from '@/components/Dashboard/Alerts/MissingInformation.vue'
-import NotInCompliance from '@/components/Dashboard/Alerts/NotInCompliance.vue'
-import NotInGoodStanding from '@/components/Dashboard/Alerts/NotInGoodStanding.vue'
 import { Routes, AllowableActions, Roles } from '@/enums'
 import { PartyIF } from '@/interfaces'
 import { AllowableActionsMixin, CommonMixin, DateMixin, EnumMixin } from '@/mixins'
@@ -256,6 +258,7 @@ export default {
 
   components: {
     AddressListSm,
+    Amalgamation,
     CoaWarningDialog,
     CustodianListSm,
     DirectorListSm,
@@ -293,6 +296,7 @@ export default {
         'getIdentifier',
         'hasComplianceWarning',
         'hasMissingInfoWarning',
+        'isFutureEffectiveAmalgamation',
         'isAdminFrozen',
         'isBenBcCccUlc',
         'isFirm',
@@ -348,16 +352,21 @@ export default {
       return +this.$route.query.filing_id
     },
 
-    /** Whether to show Missing Information alert. */
-    isMissingInformationAlert (): boolean {
-      return this.hasMissingInfoWarning
+    /** Whether to show Amalgamation alert. */
+    isAmalgamationAlert (): boolean {
+      return this.isFutureEffectiveAmalgamation
     },
 
     /** Whether to show Missing Information alert. */
     isFrozenInformationAlert (): boolean {
       return this.isAdminFrozen
     },
 
+    /** Whether to show Missing Information alert. */
+    isMissingInformationAlert (): boolean {
+      return this.hasMissingInfoWarning
+    },
+
     /** Whether to show Not In Compliance alert. */
     isNotInComplianceAlert (): boolean {
       return this.hasComplianceWarning
@@ -371,6 +380,7 @@ export default {
     /** The number of alerts. */
     alertCount (): number {
       let count = 0
+      if (this.isAmalgamationAlert) count++
       if (this.isFrozenInformationAlert) count++
       if (this.isMissingInformationAlert) count++
       if (this.isNotInComplianceAlert) count++
@@ -385,7 +395,7 @@ export default {
 
   methods: {
     goToStandaloneDirectors () {
-      this.$router.push({ name: Routes.STANDALONE_DIRECTORS, params: { filingId: 0 } }) // 0 means "new COD filing"
+      this.$router.push({ name: Routes.STANDALONE_DIRECTORS, params: { filingId: '0' } }) // 0 means "new COD filing"
     },
 
     goToChangeFiling () {
@@ -394,7 +404,7 @@ export default {
     },
 
     goToStandaloneAddresses () {
-      this.$router.push({ name: Routes.STANDALONE_ADDRESSES, params: { filingId: 0 } }) // 0 means "new COA filing"
+      this.$router.push({ name: Routes.STANDALONE_ADDRESSES, params: { filingId: '0' } }) // 0 means "new COA filing"
     },
 
     reloadDataIfNeeded (needed: boolean) {

tests/unit/Amalgamation.spec.ts

@@ -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()
+})